/* ==========================================================
   UNTAMED BORDERLAND
   MAIN WEBSITE STYLES
   ========================================================== */


/* ==========================================================
   GLOBAL RESET
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at top center,
            #24100b 0%,
            #100907 30%,
            #080605 65%,
            #050404 100%
        );

    color: #d9c9aa;

    font-family: "Caveat", cursive;

    overflow-x: hidden;
}


a {
    -webkit-tap-highlight-color: transparent;
}



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

.site-header {

    width: 100%;

    background:
        linear-gradient(
            180deg,
            #2a0804 0%,
            #190504 100%
        );

    border-bottom: 1px solid #6f2719;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.6);

    position: sticky;

    top: 0;

    z-index: 1000;
}



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

.navbar {

    width: 100%;

    min-height: 76px;

    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 25px;

    padding:
        8px
        28px;
}



/* ==========================================================
   SMALL HEADER LOGO
   ========================================================== */

.nav-logo {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
}


.nav-logo img {

    display: block;

    width: 52px !important;

    height: 52px !important;

    max-width: 52px !important;

    max-height: 52px !important;

    object-fit: contain;
}



/* ==========================================================
   MAIN NAVIGATION
   ========================================================== */

.nav-links {

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 27px;
}


.nav-links a {

    font-family:
        "Bungee",
        sans-serif;

    color: #d99b32;

    text-decoration: none;

    text-transform: uppercase;

    white-space: nowrap;

    font-size: 13px;

    line-height: 1.2;

    letter-spacing: 0.5px;

    text-shadow:
        1px 2px 0 #4b170b,
        0 0 9px rgba(215, 145, 37, 0.15);

    transition:
        color 0.2s ease,
        transform 0.2s ease,
        text-shadow 0.2s ease;
}


.nav-links a:hover {

    color: #f3bf54;

    transform: translateY(-2px);

    text-shadow:
        1px 2px 0 #5b170b,
        0 0 12px rgba(239, 174, 67, 0.45);
}



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

.nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


.nav-actions a {

    font-family:
        "Bungee",
        sans-serif;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 11px;

    line-height: 1;

    padding:
        12px
        17px;

    border-radius: 5px;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


.nav-actions a:hover {

    transform: translateY(-2px);
}



/* DISCORD */

.discord-button {

    color: #e3b85d;

    background: #302522;

    border: 1px solid #685044;
}


.discord-button:hover {

    background: #43322c;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4);
}



/* BASKET */

.basket-button {

    color: #f1c46c;

    background: #74130e;

    border: 1px solid #a32c1f;
}


.basket-button:hover {

    background: #941b14;

    box-shadow:
        0 4px 12px rgba(93, 12, 8, 0.5);
}



/* ==========================================================
   HOMEPAGE
   ========================================================== */

.homepage {

    width: 100%;
}



/* ==========================================================
   LARGE LOGO SECTION
   ========================================================== */

.logo-section {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        38px
        20px
        20px;
}


.main-logo {

    display: block;

    width: 440px !important;

    max-width: 68vw !important;

    height: auto !important;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 25px rgba(0, 0, 0, 0.7)
        );
}



/* ==========================================================
   VIDEO SECTION
   ========================================================== */

.video-section {

    width: 100%;

    display: flex;

    justify-content: center;

    padding:
        10px
        35px
        35px;
}


.video-frame {

    width: min(
        1400px,
        94vw
    );

    aspect-ratio: 16 / 6;

    overflow: hidden;

    position: relative;

    background: #000000;

    border:
        2px
        solid
        #743021;

    border-radius: 4px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.75),
        0 0 25px rgba(103, 36, 24, 0.22);
}


.video-frame::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    box-shadow:
        inset 0 0 65px rgba(0, 0, 0, 0.8);
}


.intro-video {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}



/* ==========================================================
   WELCOME / LOGIN SECTION
   ========================================================== */

.welcome-section {

    width: min(
        1000px,
        92vw
    );

    margin: 0 auto;

    text-align: center;

    padding:
        40px
        20px
        80px;
}


.welcome-small {

    font-family:
        "Caveat",
        cursive;

    color: #c2a173;

    font-size: 27px;

    font-weight: 600;

    margin-bottom: 3px;
}



/* SPECIAL BUNGEE SPICE TITLE */

.welcome-title {

    font-family:
        "Bungee Spice",
        sans-serif;

    font-size:
        clamp(
            40px,
            6vw,
            72px
        );

    line-height: 1.1;

    margin-bottom: 18px;
}



/* TAGLINE */

.tagline {

    font-family:
        "Bungee",
        sans-serif;

    color: #d69935;

    font-size:
        clamp(
            16px,
            2vw,
            23px
        );

    line-height: 1.5;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 25px;
}



/* NORMAL THEMED TEXT */

.welcome-description {

    max-width: 720px;

    margin:
        0
        auto
        35px;

    font-family:
        "Caveat",
        cursive;

    color: #d5c09b;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.5;
}



/* ==========================================================
   CFX LOGIN
   ========================================================== */

.login-area {

    margin-top: 20px;

    display: flex;

    justify-content: center;
}


.cfx-login-button {

    display: inline-block;

    font-family:
        "Bungee",
        sans-serif;

    color: #f3c76d;

    background:
        linear-gradient(
            180deg,
            #8a1d13 0%,
            #5f0c08 100%
        );

    text-decoration: none;

    text-transform: uppercase;

    font-size: 18px;

    letter-spacing: 1px;

    padding:
        18px
        45px;

    border:
        2px
        solid
        #b4412b;

    border-radius: 6px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 211, 135, 0.16);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.cfx-login-button:hover {

    transform: translateY(-3px);

    background:
        linear-gradient(
            180deg,
            #a4291c 0%,
            #74110c 100%
        );

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.65),
        0 0 20px rgba(163, 44, 31, 0.3);
}



.login-note {

    margin-top: 16px;

    color: #9f8d75;

    font-family:
        "Caveat",
        cursive;

    font-size: 19px;

    line-height: 1.4;
}



/* ==========================================================
   STORE PREVIEW SECTION
   ========================================================== */

.store-preview {

    width: 100%;

    padding:
        70px
        35px
        100px;

    border-top:
        1px
        solid
        #3d1c15;

    background:
        linear-gradient(
            180deg,
            rgba(25, 10, 7, 0.5),
            rgba(6, 5, 4, 0.8)
        );
}



/* ==========================================================
   SECTION HEADING
   ========================================================== */

.section-heading {

    text-align: center;

    margin-bottom: 45px;
}


.section-eyebrow {

    font-family:
        "Caveat",
        cursive;

    color: #b79b70;

    font-size: 25px;

    font-weight: 600;

    margin-bottom: 6px;
}


.section-heading h2 {

    font-family:
        "Bungee Spice",
        sans-serif;

    font-size:
        clamp(
            34px,
            4vw,
            54px
        );

    line-height: 1.2;
}



/* ==========================================================
   CATEGORY CARDS
   ========================================================== */

.category-grid {

    width: min(
        1400px,
        100%
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );

    gap: 18px;
}


.category-card {

    min-height: 260px;

    display: flex;

    flex-direction: column;

    text-decoration: none;

    padding:
        28px
        23px;

    background:
        linear-gradient(
            155deg,
            #24130e,
            #130b08
        );

    border:
        1px
        solid
        #5b2a1e;

    border-radius: 5px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.38);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.category-card:hover {

    transform: translateY(-7px);

    border-color: #a65032;

    box-shadow:
        0 17px 35px rgba(0, 0, 0, 0.55);
}


.category-card h3 {

    font-family:
        "Bungee",
        sans-serif;

    color: #db9f38;

    font-size: 18px;

    line-height: 1.35;

    margin-bottom: 17px;
}


.category-card p {

    font-family:
        "Caveat",
        cursive;

    color: #cbb997;

    font-size: 21px;

    font-weight: 500;

    line-height: 1.4;

    margin-bottom: 25px;
}


.category-card span {

    margin-top: auto;

    font-family:
        "Bungee",
        sans-serif;

    color: #c7733d;

    font-size: 11px;

    text-transform: uppercase;
}



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

.site-footer {

    border-top:
        1px
        solid
        #55251a;

    background: #120705;

    text-align: center;

    padding:
        35px
        20px
        45px;

    color: #aa9473;
}


.footer-logo {

    width: 85px;

    height: 85px;

    object-fit: contain;

    margin-bottom: 5px;
}


.site-footer p {

    font-family:
        "Bungee",
        sans-serif;

    color: #c59642;

    font-size: 12px;

    text-transform: uppercase;
}


.footer-small {

    margin-top: 8px;

    font-family:
        "Caveat",
        cursive !important;

    color: #8e7b62 !important;

    font-size: 18px !important;

    text-transform: none !important;
}



/* ==========================================================
   SMALLER DESKTOP
   ========================================================== */

@media (max-width: 1350px) {

    .navbar {

        gap: 18px;

        padding:
            8px
            20px;
    }


    .nav-links {

        gap: 18px;
    }


    .nav-links a {

        font-size: 11px;
    }


    .nav-actions a {

        font-size: 10px;

        padding:
            10px
            13px;
    }


    .category-grid {

        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }
}



/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 950px) {

    .navbar {

        display: flex;

        flex-wrap: wrap;

        justify-content: space-between;

        gap: 12px;
    }


    .nav-logo {

        order: 1;
    }


    .nav-actions {

        order: 2;
    }


    .nav-links {

        order: 3;

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        padding:
            8px
            0
            4px;
    }


    .main-logo {

        width: 380px !important;

        max-width: 80vw !important;
    }


    .category-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }
}



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

@media (max-width: 620px) {

    .navbar {

        padding:
            10px
            12px;
    }


    .nav-logo {

        width: 48px;

        height: 48px;
    }


    .nav-logo img {

        width: 46px !important;

        height: 46px !important;

        max-width: 46px !important;

        max-height: 46px !important;
    }


    .nav-links {

        gap:
            10px
            14px;
    }


    .nav-links a {

        font-size: 9px;
    }


    .nav-actions a {

        font-size: 9px;

        padding:
            9px
            10px;
    }


    .logo-section {

        padding:
            30px
            15px
            15px;
    }


    .main-logo {

        width: 320px !important;

        max-width: 90vw !important;
    }


    .video-section {

        padding:
            5px
            12px
            25px;
    }


    .video-frame {

        width: 100%;

        aspect-ratio: 16 / 9;
    }


    .welcome-section {

        padding:
            30px
            16px
            60px;
    }


    .welcome-description {

        font-size: 22px;
    }


    .cfx-login-button {

        width: 100%;

        max-width: 360px;

        font-size: 15px;

        padding:
            16px
            20px;
    }


    .store-preview {

        padding:
            55px
            15px
            70px;
    }


    .category-grid {

        grid-template-columns: 1fr;
    }


    .category-card {

        min-height: 220px;
    }

}