/*
 DigitalHostStudio Git
 Custom Interface Branding
*/

:root {
    --dhs-bg: #091324;
    --dhs-surface: #101d32;
    --dhs-cyan: #22d3ee;
    --dhs-blue: #3b82f6;
    --dhs-purple: #8b5cf6;
}

/* NAVIGATION */

#navbar {
    background: linear-gradient(
        110deg,
        #091324 0%,
        #102343 55%,
        #21143c 100%
    ) !important;

    border-bottom: 1px solid rgba(34, 211, 238, 0.25);
}

#navbar .item {
    color: #e6f3ff !important;
}

#navbar .item:hover {
    background: rgba(34, 211, 238, 0.12) !important;
}

#navbar-logo img {
    object-fit: contain;
}

/* HOMEPAGE */

.page-content.home {
    background:
        radial-gradient(
            ellipse at top,
            rgba(59, 130, 246, 0.18),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #091324,
            #101d32 65%,
            #21143c
        );

    min-height: 75vh;
}

.page-content.home,
.page-content.home h1,
.page-content.home h2,
.page-content.home p {
    color: #f0f7ff;
}

.page-content.home .hero {
    position: relative;
    padding-top: 270px;
}

.page-content.home .hero::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 900px);
    height: 230px;
    background:
        url("/assets/img/homepage-banner.png")
        center / contain no-repeat;
    pointer-events: none;
}

.page-content.home a {
    color: #67e8f9;
}

/* LOGIN PAGE */

.page-content:has(.signin) {
    background:
        linear-gradient(
            rgba(5, 12, 28, 0.76),
            rgba(5, 12, 28, 0.90)
        ),
        url("/assets/img/login-background.png")
        center / cover no-repeat;

    min-height: calc(100vh - 120px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-content .signin {
    width: min(95%, 460px);
}

.page-content .signin .ui.segment,
.page-content .signin .ui.form {
    background: rgba(14, 27, 48, 0.96);
    color: #f0f7ff;
    border-radius: 14px;
}

.page-content .signin .ui.segment {
    border: 1px solid rgba(34, 211, 238, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.page-content .signin .header {
    color: #f0f7ff;
}

.page-content .signin label {
    color: #dbeafe !important;
}

.page-content .signin input {
    background: #0a1629 !important;
    color: #ffffff !important;
    border: 1px solid #334766 !important;
    border-radius: 8px !important;
}

.page-content .signin input:focus {
    border-color: var(--dhs-cyan) !important;
}

.page-content .signin .ui.primary.button,
.page-content .signin .ui.green.button {
    background: linear-gradient(
        100deg,
        var(--dhs-blue),
        var(--dhs-purple)
    ) !important;

    color: #ffffff !important;
    border-radius: 8px;
}

.page-content .signin a {
    color: #67e8f9;
}

/* FOOTER */

.page-footer {
    background: #091324 !important;
    border-top: 1px solid rgba(34, 211, 238, 0.15);
}

.page-footer,
.page-footer a {
    color: #b9c9df !important;
}

/* MOBILE */

@media (max-width: 768px) {
    .page-content.home .hero {
        padding-top: 170px;
    }

    .page-content.home .hero::before {
        height: 150px;
        width: 95vw;
    }

    .page-content .signin {
        width: 95%;
    }
}