/* ==========================================================================
   PEOPLECORE / CAREER PORTAL � CUSTOM THEME STYLESHEET
   --------------------------------------------------------------------------
   1.  Font imports
   2.  CSS variables � Light theme
   3.  CSS variables � Dark theme
   4.  Button overrides
   5.  Validation / danger states
   6.  Portal navbar (top banner)
   7.  Footer
   8.  Typography helpers
   9.  Color helpers
   10. Sign-in / logo / misc
   11. CMS Banner (Desktop / Tablet / Mobile)   <-- responsive & aligned
   ========================================================================== */


/* ==========================================================================
   1. FONT IMPORTS
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");


/* ==========================================================================
   2. CSS VARIABLES � LIGHT THEME
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    /* ---- Brand fonts ---- */
    --phoenix-font-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --phoenix-body-font-family: var(--phoenix-font-sans-serif);
    --peoplecore-brand-font: "Trajan Pro", "Times New Roman", Georgia, serif;
    /* ---- Core palette ---- */
    --phoenix-black: #000000;
    --phoenix-white: #f2f2f2;
    /* ---- Gray scale (remapped to brand greens/neutrals) ---- */
    --phoenix-gray-50: #f2f2f2;
    --phoenix-gray-100: #f2f2f2;
    --phoenix-gray-200: #b0c5b8;
    --phoenix-gray-300: #b0c5b8;
    --phoenix-gray-400: #85a390;
    --phoenix-gray-500: #85a390;
    --phoenix-gray-600: #85a390;
    --phoenix-gray-700: #012403;
    --phoenix-gray-800: #012403;
    --phoenix-gray-900: #012403;
    --phoenix-gray-1000: #000000;
    --phoenix-gray-1100: #000000;
    /* ---- Semantic colors ---- */
    --phoenix-primary: #006312;
    --phoenix-primary-rgb: 0, 99, 18;
    --phoenix-secondary: #012403;
    --phoenix-secondary-rgb: 1, 36, 3;
    --phoenix-success: #006312;
    --phoenix-success-rgb: 0, 99, 18;
    --phoenix-info: #85a390;
    --phoenix-info-rgb: 133, 163, 144;
    --phoenix-warning: #b0c5b8;
    --phoenix-warning-rgb: 176, 197, 184;
    --phoenix-danger: #000000;
    --phoenix-danger-rgb: 0, 0, 0;
    --phoenix-light: #f2f2f2;
    --phoenix-light-rgb: 242, 242, 242;
    --phoenix-dark: #012403;
    --phoenix-dark-rgb: 1, 36, 3;
    /* ---- Body / text / backgrounds ---- */
    --phoenix-body-color: #012403;
    --phoenix-body-color-rgb: 1, 36, 3;
    --phoenix-body-bg: #f2f2f2;
    --phoenix-body-bg-rgb: 242, 242, 242;
    --phoenix-emphasis-color: #000000;
    --phoenix-emphasis-color-rgb: 0, 0, 0;
    --phoenix-secondary-color: #012403;
    --phoenix-secondary-bg: #b0c5b8;
    --phoenix-tertiary-color: #012403;
    --phoenix-tertiary-bg: #b0c5b8;
    --phoenix-heading-color: #006312;
    --phoenix-link-color: #006312;
    --phoenix-link-color-rgb: 0, 99, 18;
    --phoenix-link-hover-color: #012403;
    --phoenix-link-hover-color-rgb: 1, 36, 3;
    --phoenix-border-color: #b0c5b8;
    --phoenix-border-color-rgb: 176, 197, 184;
    --phoenix-body-highlight-color: #012403;
    --phoenix-body-highlight-bg: #b0c5b8;
    /* ---- Subtle backgrounds & borders ---- */
    --phoenix-primary-bg-subtle: #b0c5b8;
    --phoenix-secondary-bg-subtle: #b0c5b8;
    --phoenix-success-bg-subtle: #b0c5b8;
    --phoenix-info-bg-subtle: #b0c5b8;
    --phoenix-warning-bg-subtle: #f2f2f2;
    --phoenix-danger-bg-subtle: #f2f2f2;
    --phoenix-primary-border-subtle: #85a390;
    --phoenix-secondary-border-subtle: #85a390;
    --phoenix-success-border-subtle: #85a390;
    --phoenix-info-border-subtle: #85a390;
    --phoenix-warning-border-subtle: #b0c5b8;
    --phoenix-danger-border-subtle: #000000;
    /* ---- Form validation ---- */
    --phoenix-form-valid-color: #006312;
    --phoenix-form-valid-border-color: #006312;
    --phoenix-form-invalid-color: #000000;
    --phoenix-form-invalid-border-color: #000000;
    --phoenix-focus-ring-color: rgba(0, 99, 18, 0.25);
}


/* ==========================================================================
   3. CSS VARIABLES � DARK THEME
   ========================================================================== */
[data-bs-theme="dark"] {
    --phoenix-body-color: #f2f2f2;
    --phoenix-body-color-rgb: 242, 242, 242;
    --phoenix-body-bg: #012403;
    --phoenix-body-bg-rgb: 1, 36, 3;
    --phoenix-emphasis-color: #f2f2f2;
    --phoenix-emphasis-color-rgb: 242, 242, 242;
    --phoenix-secondary-color: #b0c5b8;
    --phoenix-secondary-bg: #012403;
    --phoenix-tertiary-color: #85a390;
    --phoenix-tertiary-bg: #012403;
    --phoenix-heading-color: #f2f2f2;
    --phoenix-link-color: #b0c5b8;
    --phoenix-link-color-rgb: 176, 197, 144;
    --phoenix-link-hover-color: #f2f2f2;
    --phoenix-link-hover-color-rgb: 242, 242, 242;
    --phoenix-border-color: #85a390;
    --phoenix-border-color-rgb: 133, 163, 144;
    --phoenix-body-highlight-color: #f2f2f2;
    --phoenix-body-highlight-bg: #006312;
}


    /* ==========================================================================
   4. BUTTON OVERRIDES
   ========================================================================== */
    .btn-primary,
    .btn-success,
    .btn-info,
    .btn-subtle-info,
    .form-check-input:checked,
    .btn-phoenix-primary,
    .btn-outline-primary,
    [data-bs-theme="dark"] .btn-phoenix-primary {
        --phoenix-btn-color: #f2f2f2;
        --phoenix-btn-bg: #006312;
        --phoenix-btn-border-color: #006312;
        --phoenix-btn-hover-color: #f2f2f2;
        --phoenix-btn-hover-bg: #012403;
        --phoenix-btn-hover-border-color: #012403;
        --phoenix-btn-active-color: #f2f2f2;
        --phoenix-btn-active-bg: #012403;
        --phoenix-btn-active-border-color: #012403;
    }

.btn-danger {
    --phoenix-btn-color: #f2f2f2;
    --phoenix-btn-bg: #000000;
    --phoenix-btn-border-color: #000000;
    --phoenix-btn-hover-color: #f2f2f2;
    --phoenix-btn-hover-bg: #012403;
    --phoenix-btn-hover-border-color: #012403;
}

.btn-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: inherit !important;
}


/* ==========================================================================
   5. VALIDATION / DANGER STATES
   ========================================================================== */
.invalid,
.is-invalid {
    outline-color: #000000 !important;
}

.validation-message,
.invalid-feedback,
.text-danger {
    color: #000000 !important;
}

.bg-danger {
    background-color: #000000 !important;
}


/* ==========================================================================
   6. PORTAL NAVBAR (TOP BANNER)
   ========================================================================== */
.portal-banner,
.portal-banner .navbar {
    background: linear-gradient(90deg, #002606 0%, #004d0d 25%, #006312 50%, #004d0d 75%, #002606 100%);
    color: #ffffff;
    border: none !important;
    box-shadow: none !important;
}

    .portal-banner .nav-link,
    .portal-banner .btn-link,
    .portal-banner .navbar-toggler {
        color: #f2f2f2 !important;
    }

        .portal-banner .nav-link:hover,
        .portal-banner .nav-link:focus {
            color: #f2f2f2 !important;
            background-color: #006312;
        }

    .portal-banner .dropdown-menu,
    .portal-banner .dropdown-menu .card {
        background-color: #C5D6C9;
        color: #012403;
    }

        .portal-banner .dropdown-menu .nav-link {
            color: #012403 !important;
        }

            .portal-banner .dropdown-menu .nav-link:hover,
            .portal-banner .dropdown-menu .nav-link:focus {
                color: #012403 !important;
                background-color: #b0c5b8;
            }

.banner-job-link {
    font-weight: 700;
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.portal-footer {
    background: linear-gradient( 90deg, #000000 0%, #121212 25%, #1e1e1e 50%, #121212 75%, #000000 100% );
    color: #ffffff;
    border: none !important;
    box-shadow: none !important;
}

    .portal-footer .footer-logo img {
        height: 40px;
        width: auto;
        display: block;
    }

    .portal-footer .footer-copy {
        font-size: 0.95rem;
        font-weight: 600;
        color: #ffffff;
    }

/* Footer � mobile: stack + center */
@media (max-width: 767px) {
    .portal-footer .footer-copy {
        text-align: center;
        font-size: 0.85rem;
    }

    .portal-footer .footer-logo img {
        height: 34px;
        margin: 0 auto;
    }
}


/* ==========================================================================
   8. TYPOGRAPHY HELPERS
   ========================================================================== */
.brand-heading,
.h-brand,
.display-brand,
h1.brand-heading,
h2.brand-heading,
.page-title.brand-heading {
    font-family: var(--peoplecore-brand-font);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--phoenix-heading-color);
}

.font-roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}

.font-roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

.font-roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
}


/* ==========================================================================
   9. COLOR HELPERS
   ========================================================================== */
.text-brand-primary {
    color: #006312 !important;
}

.text-brand-dark {
    color: #012403 !important;
}

.text-brand-muted {
    color: #85a390 !important;
}

.text-brand-soft {
    color: #b0c5b8 !important;
}

.bg-brand-primary {
    background-color: #006312 !important;
}

.bg-brand-dark {
    background-color: #012403 !important;
}

.bg-brand-soft {
    background-color: #b0c5b8 !important;
}

.bg-brand-light {
    background-color: #f2f2f2 !important;
}

.border-brand-soft {
    border-color: #b0c5b8 !important;
}

.border-brand-muted {
    border-color: #85a390 !important;
}


/* ==========================================================================
   10. SIGN-IN / LOGO / MISC
   ========================================================================== */
.signin-card {
    width: 100%;
    padding: 1.5rem 1.25rem;
}

.signin-logo {
    width: 290px;
    height: auto;
}

.signin-btn {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.mobile-displaycard {
    width: 100%;
    min-width: 0;
}

.mobile-logo {
    height: 55px;
}

/* Large screens: match content container width */
@media (min-width: 1540px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container,
    .product-filter-container {
        max-width: 1212px !important;
    }
}


/* ==========================================================================
   11. CMS BANNER (DESKTOP / TABLET / MOBILE)
   --------------------------------------------------------------------------
   RULE: Banner must sit inside the SAME container as the content:
         <div class="container-small-xl px-lg-5 px-3"> ... </div>
   Each device shows its own image; images fill the container (no crop).
   ========================================================================== */

/* ---- Device-swap defaults (all screens) ---- */
.banner-desktop {
    display: block;
}

.banner-tablet {
    display: none;
}

.banner-mobile-only {
    display: none;
}


.cms-banner-wrapper .cms-banner-content img {
    width: 100% !important;
    max-width: none !important;
    height: 510px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
}

.cms-banner-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.cms-banner-wrapper.nav-offset {
    padding-top: 68px !important;
    margin-top: 0 !important;
}

/* =========================================
   CHECKBOX FILTER
   ========================================= */

.checkbox-group {
    width: 100%;
    margin: 0;
}

    .checkbox-group .filter-header {
        background-color: #292929;
        color: #ffffff;
        padding: 0.65rem 1rem;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
    }

        .checkbox-group .filter-header:hover {
            color: #ffffff;
        }

    .checkbox-group .filter-content {
        background-color: #f5faf7;
        padding: 0;
    }

.checkbox-item {
    padding: 0.45rem 1rem;
    margin: 0;
}

    .checkbox-item:nth-child(even) {
        background-color: #e5f0e9;
    }

    .checkbox-item:nth-child(odd) {
        background-color: #B9CAC0;
    }

    .checkbox-item .form-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .checkbox-item .form-check-input {
        margin-left: 0;
        flex-shrink: 0;
    }

    .checkbox-item .form-check-label {
        cursor: pointer;
    }


/* ===================== MOBILE (? 575px) ===================== */
@media (max-width: 575px) {
    .banner-desktop {
        display: none;
    }

    .banner-tablet {
        display: none;
    }

    .banner-mobile-only {
        display: block;
    }

    .cms-banner-wrapper {
        padding: 0;
        overflow: hidden;
    }

    .banner-mobile-only img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block;
        margin: 0 auto;
    }

    .cms-banner-wrapper.nav-offset {
        padding-top: 70px !important;
    }

    .cms-banner-wrapper .cms-banner-content.banner-mobile-only img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ===================== TABLET (576px � 991px) ===================== */
@media (min-width: 576px) and (max-width: 991px) {
    .banner-desktop {
        display: none;
    }

    .banner-tablet {
        display: block;
    }

    .cms-banner-wrapper {
        display: flex;
        justify-content: center;
        padding: 0;
        width: 100%;
    }

    .cms-banner-content {
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }

    .cms-banner-wrapper .cms-banner-content img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
}

/* ===================== DESKTOP (? 992px) ===================== */
@media (min-width: 992px) {
    .cms-banner-wrapper {
        display: flex;
        justify-content: center;
        padding: 0;
    }

    .cms-banner-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .cms-banner-wrapper .cms-banner-content img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .cms-banner-wrapper .cms-banner-content.banner-desktop-applicant img {
        max-width: 100% !important;
    }

    @media (min-width: 1540px) {
        .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container, .product-filter-container {
            max-width: 1212px !important;
        }
    }
}

/* ===== STICKY FOOTER LAYOUT ===== */
html, body {
    overflow-x: hidden; /* kill horizontal scroll */
    width: 100%;
    max-width: 100%;
}

.app-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* fill the full screen height */
}

.app-content {
    flex: 1 0 auto; /* grows to fill space ? pushes footer down */
}

.portal-footer {
    flex-shrink: 0; /* footer keeps its natural height */
}


/*Banner Carousel Slide*/
.cms-auto-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/*.cms-slide {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    animation: cmsSlide 10s infinite;
}

    .cms-slide:first-child {
        position: relative;
    }

    .cms-slide:nth-child(2) {
        animation-delay: 5s;
    }

@keyframes cmsSlide {
    0%, 45% {
        transform: translateX(0);
    }

    50%, 95% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}*/