/* ============================================
   TASK UNIT BLACKBEARD
   OFFICIAL HOMEPAGE
   VERSION 3.0
   BLACK & BLOOD RED
============================================ */


/* ============================================
   1. CUSTOMIZATION SETTINGS
============================================ */

:root {

    /* OFFICIAL COLORS */
    --tub-black: #080808;
    --tub-blood-red: #8B0000;
    --tub-red-hover: #B1121B;

    /* CONTENT BACKGROUND */
    --tub-panel: rgba(12, 12, 12, 0.96);

    /* TEXT COLORS */
    --tub-white: #FFFFFF;
    --tub-text: #D6D2CC;
    --tub-muted: #A8A8A8;

    /* WEBSITE WIDTH */
    --tub-width: 1300px;

    /* FLAG BACKGROUND */
    --tub-background:
        url("https://taskunitblackbeard.us/storage/resources/Crowned-Skeleton-and-Blood-Red-Heart-6af626e78ac26.png");

    /* FLAG DARKNESS: 0 TO 1 */
    --tub-background-darkness: 0.35;

    /* MAIN PHOTO HEIGHT */
    --tub-hero-height: 540px;

}


/* ============================================
   2. WEBSITE BACKGROUND
============================================ */

body {

    background-color: var(--tub-black) !important;

    background-image:
        linear-gradient(
            rgba(
                0, 0, 0,
                var(--tub-background-darkness)
            ),
            rgba(
                0, 0, 0,
                var(--tub-background-darkness)
            )
        ),
        var(--tub-background) !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

    min-height: 100vh;

}


/* ============================================
   3. MAIN CONTENT CONTAINER
============================================ */

.tub-home {

    width: 100%;
    max-width: var(--tub-width);

    margin: 30px auto 70px;

    box-sizing: border-box;

    color: var(--tub-text);

}

.tub-home *,
.tub-home *::before,
.tub-home *::after {

    box-sizing: border-box;

}


/* ============================================
   4. WIDE MAIN UNIT IMAGE
============================================ */

.tub-hero {

    position: relative;

    width: 100%;
    height: var(--tub-hero-height);

    overflow: hidden;

    background-color: #111111;

    border: 1px solid #292929;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.65);

}


/* MAIN PHOTO */

.tub-hero-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

}


/* SUBTLE PHOTO DARKENING */

.tub-hero-overlay {

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0.75) 100%
    );

    pointer-events: none;

}


/* ============================================
   5. ENLISTMENT BUTTON POSITION
============================================ */

.tub-hero-action {

    position: absolute;

    bottom: 35px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

    width: max-content;
    max-width: calc(100% - 30px);

}


/* ============================================
   6. ENLISTMENT BUTTON
============================================ */

.tub-enlist-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    padding: 20px 38px;

    background-color: var(--tub-blood-red);

    color: #FFFFFF !important;

    border: 1px solid #B52B2B;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-decoration: none !important;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.65);

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

}


.tub-enlist-btn:hover {

    background-color: var(--tub-red-hover);

    color: #FFFFFF !important;

    transform: translateY(-3px);

    box-shadow:
        0 10px 35px rgba(139, 0, 0, 0.45);

}


.tub-enlist-btn:focus-visible {

    outline: 2px solid white;
    outline-offset: 4px;

}


/* ============================================
   7. MISSION STATEMENT PANEL
============================================ */

.tub-mission {

    width: 100%;

    margin-top: 20px;

    padding: 65px 75px;

    background: var(--tub-panel);

    border-top: 3px solid var(--tub-blood-red);

    border-left: 1px solid #292929;
    border-right: 1px solid #292929;
    border-bottom: 1px solid #292929;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.50);

    text-align: center;

}


/* ============================================
   8. MISSION HEADING
============================================ */

.tub-mission-heading {

    margin-bottom: 35px;

}


.tub-eyebrow {

    display: block;

    color: #C74343;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 15px;

}


.tub-mission-heading h1 {

    color: var(--tub-white);

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin: 0 0 22px;

}


/* RED ACCENT LINE */

.tub-heading-line {

    width: 75px;
    height: 3px;

    background-color: var(--tub-blood-red);

    margin: 0 auto;

}


/* ============================================
   9. MISSION TEXT
============================================ */

.tub-mission-content {

    max-width: 950px;

    margin: 0 auto;

}


.tub-mission-content p {

    color: var(--tub-text);

    font-size: 17px;

    line-height: 1.95;

    margin: 0 0 24px;

}


.tub-mission-content p:last-child {

    margin-bottom: 0;

}


/* ============================================
   10. UNIT MOTTO
============================================ */

.tub-motto {

    margin-top: 45px;

    padding-top: 30px;

    border-top: 1px solid #383030;

    color: #C74343;

    font-size: clamp(18px, 2.5vw, 26px);

    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;

}


/* ============================================
   11. TABLET RESPONSIVENESS
============================================ */

@media (max-width: 1024px) {

    .tub-home {

        width: calc(100% - 30px);

        margin: 20px auto 50px;

    }

    .tub-hero {

        height: 450px;

    }

    .tub-mission {

        padding: 50px 45px;

    }

}


/* ============================================
   12. MOBILE RESPONSIVENESS
============================================ */

@media (max-width: 768px) {

    body {

        background-attachment: scroll !important;

    }

    .tub-home {

        width: calc(100% - 20px);

        margin: 15px auto 40px;

    }

    .tub-hero {

        height: 340px;

    }

    .tub-hero-action {

        bottom: 20px;

    }

    .tub-enlist-btn {

        padding: 16px 22px;

        font-size: 12px;

        letter-spacing: 0.8px;

        gap: 12px;

    }

    .tub-mission {

        margin-top: 15px;

        padding: 40px 25px;

    }

    .tub-eyebrow {

        font-size: 10px;

        letter-spacing: 2px;

    }

    .tub-mission-heading h1 {

        font-size: 32px;

    }

    .tub-mission-content p {

        font-size: 15px;

        line-height: 1.85;

    }

    .tub-motto {

        font-size: 18px;

        letter-spacing: 1.5px;

    }

}


/* ============================================
   13. SMALL MOBILE SCREENS
============================================ */

@media (max-width: 400px) {

    .tub-hero {

        height: 280px;

    }

    .tub-enlist-btn {

        padding: 14px 16px;

        font-size: 11px;

    }

    .tub-mission {

        padding: 30px 18px;

    }

    .tub-motto {

        font-size: 16px;

    }

}


/* ============================================
   14. ACCESSIBILITY
============================================ */

@media (prefers-reduced-motion: reduce) {

    .tub-enlist-btn {

        transition: none;

    }

    .tub-enlist-btn:hover {

        transform: none;

    }

}