:root {
    /* Surfaces */
    --surface-0: #121212;
    --surface-1: #1a1a1a;
    --surface-2: #0e0e0e;

    /* Brand */
    --brand-blue: #1861ac;
    --brand-blue-hi: #4f9cdb; /* lightened for AA-safe text on dark surfaces */
    --brand-amber: #ff5c00;

    /* Text */
    --text-body: #eaf2f5;
    --text-muted: #a9c1cb;
    --accent-glow: #18fefd; /* accents/hover/glow effects only, not body text */
    --text-nav: #eaeaea;

    /* Borders */
    --border-brand: #1861ac;
}

a, .btn-link {
    color: var(--brand-blue-hi);
}

.btn-primary {
    color: #fff;
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--brand-blue-hi);
        border-color: var(--brand-blue-hi);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-blue-hi);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Bootstrap's .table hardcodes light-theme text (#212529) on a transparent
   background, which reads as near-invisible dark-on-dark against this
   site's dark surfaces. Used by the Employee Portal's asset/truck admin
   tables (truck management, current assignments, assignment history). */
.table {
    --bs-table-color: var(--text-body);
    --bs-table-bg: transparent;
    --bs-table-striped-color: var(--text-body);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-active-color: var(--text-body);
    --bs-table-active-bg: rgba(255, 255, 255, 0.08);
    --bs-table-hover-color: var(--text-body);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    color: var(--text-body);
    border-color: #333;
}


/* Root layout and theme settings */
body {
    margin: 0;
    padding: 0;
    font-family: 'Exo 2', sans-serif;
    background-color: var(--surface-0);
    color: var(--text-body);
}

/* Full-width banner image */
.hero-banner {
    width: 100%;
    height: 75vh;
    background-image: url('Images/SunsetandRigBanner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: inset 0 -50px 100px rgba(0,0,0,0.6);
    border-top: 1px solid var(--border-brand);
}

/* Overlay for title or fade effect */
.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    color: var(--text-body);
    align-content: center;
    text-align: center;
    padding: 0 1.5rem;
}

.hero-eyebrow {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-glow);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
}

/* Navbar */
.navbar {
    padding: 1rem 2rem;
    background-color: var(--surface-0);
    border-bottom: 1px solid #2e2e2e;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Flex row so the brand stays left and the toggler/menu stay right without
   relying on Bootstrap's .navbar flex machinery (the nav element doesn't
   carry the .navbar class) or on absolute positioning that can silently
   stop applying if the scoped component CSS isn't bundled into a deploy. */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.75rem;
}

.navbar-brand {
    order: 1;
    font-size: 1.1rem;
}

.brand-logo {
    display: block;
    height: 60px;
    width: auto;
}

.navbar-toggler {
    order: 2;
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    margin-right: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

@media (min-width: 1400px) {
    .navbar-toggler {
        display: none;
    }
}

.image-glow {
    filter: drop-shadow(0 0 15px rgba(24, 97, 172, 0.8)); /* Adjust color, blur, and spread */
}

    .navbar a {
        text-decoration: none;
        color: var(--text-nav);
        margin: 0 1rem;
        transition: color 0.3s ease;
    }

        .navbar a:hover {
            color: var(--brand-amber); /* Glowing amber accent */
        }
        .navbar-nav{
            text-align:center;
            float:none;

        }



.nav-menu {
    order: 3;
    flex: 1 1 auto; /* fill the remaining row width so centering has room to work */
    min-width: 0;
    display: flex;
    justify-content: center; /* Centers items horizontally */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem; /* Optional spacing between items */
}

    .nav-menu li a {
        color: var(--text-nav);
        text-decoration: none;
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
        transition: color 0.3s ease;
    }

        .nav-menu li a:hover {
            color: var(--brand-amber); /* Futuristic accent */
        }

@media (max-width: 1399.98px) {
    .nav-menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        gap: 0.25rem;
    }

        .nav-menu.expanded {
            display: flex;
        }
}

/* Section styling */
.section {
    padding: 4rem 2rem;
    border-bottom: 1px solid #1f1f1f;
}

.section-title {
    font-size: 2rem;
    color: var(--brand-blue-hi);
    margin-bottom: 1rem;
}

/* Cards or service blocks */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.card {
    background-color: var(--surface-1);
    border: 1px solid var(--border-brand);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 0 12px rgba(24, 254, 253, 0.15);
    transition: transform 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 16px rgba(24, 254, 253, 0.4);
    }

/* Photo banner near the top of a service page, same card border/glow language as .card */
.service-image {
    width: 100%;
    border: 1px solid var(--border-brand);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(24, 254, 253, 0.15);
    margin-bottom: 2rem;
}

    .service-image img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Closing call-to-action panel — same dark card family as .card, but the
   amber accent (already used for hover states) marks it as the action to take. */
.cta-panel {
    background-color: var(--surface-1);
    border: 1px solid var(--brand-amber);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 0 12px rgba(255, 92, 0, 0.15);
}

/* Footer */
footer {
    background-color: var(--surface-2);
    padding: 3rem 2rem 2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-brand);
}

    footer .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2rem;
        max-width: 1100px;
        margin: 0 auto;
        text-align: left;
    }

    footer h3 {
        color: var(--brand-blue-hi);
        font-size: 1.1rem;
        margin: 0 0 0.75rem;
    }

    footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        footer ul li {
            margin-bottom: 0.4rem;
        }

    footer a {
        color: var(--text-muted);
    }

        footer a:hover {
            color: var(--brand-amber);
        }

    footer .footer-bottom {
        text-align: center;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #1f1f1f;
        font-size: 0.8rem;
    }


.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--surface-0);
    border: 1px solid var(--border-brand);
    border-radius: 4px;
    min-width: 320px;
    padding: 0.5rem 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 1;
}

    .dropdown-content a {
        display: block;
        padding: 0.6rem 1rem;
        margin: 0;
    }

    .dropdown-content .dropdown-logout {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.6rem 1rem;
        margin: 0;
        color: var(--text-nav);
        border: none;
        background: none;
    }

        .dropdown-content .dropdown-logout:hover {
            color: var(--brand-amber);
        }

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

/* Related services links, shown near the bottom of each service page */
.related-services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 1rem 0;
    margin-top: 1rem;
    border-top: 1px solid #1f1f1f;
}

    .related-services-label {
        color: var(--text-muted);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .related-services a {
        color: var(--brand-blue-hi);
        text-decoration: none;
        font-size: 0.9rem;
        border: 1px solid var(--border-brand);
        border-radius: 999px;
        padding: 0.3rem 0.85rem;
    }

        .related-services a:hover {
            color: #fff;
            background-color: var(--brand-blue);
        }