/* ============================================================
   Job Application – shared theme
   Logo chip, header/footer, themed buttons and entrance
   animations. Linked into every page in /jobapplication so the
   look stays consistent. Overrides per-page header/footer colours.
   ============================================================ */


:root {
    --brand: #2d50ad;       /* main theme color: header, footer, buttons, active step */
    --brand-dark: #233f8a;  /* darker shade: hover states, footer, gradient end */
    --accent: #0056b3;      /* secondary accent */
}

/* ---------- Header ---------- */
header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 22px !important;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
    border-bottom: none !important;
    animation: jobappFadeDown .5s ease both;
}

.logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    /* matches the logo outline: top-left rounded, other 3 corners sharp */
    border-radius: 12px 0 0 0;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
    animation: jobappPopIn .6s ease .1s both;
}

    .logo-chip img {
        height: 40px !important;
        width: auto !important;
        display: block;
        /* keep the logo's own rounded top-left aligned with the chip */
        border-radius: 9px 0 0 0;
        /* drop any old white drop-shadow halo */
        filter: none !important;
    }

header h1 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    flex: 1 1 auto !important;
    color: #fff !important;
    letter-spacing: .3px;
}

.header-spacer {
    flex: 0 0 56px; /* balances the logo so the title stays centered */
}

/* ---------- Footer ---------- */
footer {
    background: var(--brand-dark) !important;
    color: #fff !important;
    border-top: none !important;
    animation: jobappFadeUp .5s ease .2s both;
}

/* ---------- Themed buttons ---------- */
.btn--primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    transition: background-color .2s ease;
}

    .btn--primary:hover,
    .btn--primary:focus {
        background-color: var(--brand-dark) !important;
        border-color: var(--brand-dark) !important;
        color: #fff !important;
    }

.btn--primary-bordered {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

    .btn--primary-bordered:hover {
        background-color: var(--brand) !important;
        color: #fff !important;
    }

.btn-home {
    background-color: var(--brand) !important;
    color: #fff !important;
    transition: background-color .2s ease;
}

    .btn-home:hover {
        background-color: var(--brand-dark) !important;
    }

/* Reset / secondary outline button */
.btn--grey-bordered {
    background-color: #fff !important;
    border: 1px solid var(--brand) !important;
    color: var(--brand) !important;
    transition: background-color .2s ease, color .2s ease;
}

    .btn--grey-bordered i {
        color: inherit !important;
    }

    .btn--grey-bordered:hover,
    .btn--grey-bordered:focus,
    .btn--grey-bordered:active {
        background-color: var(--brand) !important;
        border-color: var(--brand) !important;
        color: #fff !important;
    }

/* ---------- Step / page indicator (themed to --brand) ----------
   The wizard ships with an orange (#f39c12) active state. These
   rules retint every active / visited piece to the brand colour so
   changing --brand above recolours the whole indicator.            */

/* active step circle */
body .wizard .nav-tabs > li.step-tag-active > a,
body .nav-tabs > li.step-tag-active > a,
body li.step-tag-active > a,
body .stepwizard .btn.step-tag-active {
    background-color: var(--brand) !important;
    border: 1px solid var(--brand) !important;
    color: #fff !important;
}

/* active step icon */
body .wizard .nav-tabs > li.step-tag-active > a > i,
body li.step-tag-active > a > i,
body .step-tag-active > .btn:hover,
body .step-tag-active > .btn:focus {
    color: #fff !important;
}

/* active step label */
body .step-tag-active p,
body .stepwizard-step.active p,
body li.step-tag-active > p {
    color: var(--brand) !important;
}

/* connector line of the active / visited steps.
   The global theme paints the active connector orange (#F3994C) via
   `.step-tag-active:before`, and step-tab paints the visited one green
   (#92cf5c). Retint both to the brand colour. */
body .wizard .nav-tabs > .step-tag-active:before,
body .wizard .nav-tabs > li.step-tag-active:before,
body .wizard .nav-tabs > .step-tag-visited:before,
body .wizard .nav-tabs > li.step-tag-visited:before,
body .nav-tabs > .step-tag-active:before,
body .nav-tabs > .step-tag-visited:before,
body .wizard-5 li.stepwizard-step.active::before {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* round-tab variant used by some wizards */
body .wizard li.active span.round-tab,
body a:hover > span.round-tab {
    border-color: var(--brand) !important;
}

body .wizard li.active span.round-tab i,
body a:hover > span.round-tab > i {
    color: var(--brand) !important;
}

/* ---------- Content entrance ---------- */
.wizard,
.contentbg,
.success-container,
.container-fluid {
    animation: jobappFadeUp .5s ease .15s both;
}

/* ---------- Keyframes ---------- */
@keyframes jobappFadeDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes jobappFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes jobappPopIn {
    0%   { opacity: 0; transform: translateY(10px) scale(.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    header, .logo-chip, footer, .wizard, .contentbg,
    .success-container, .container-fluid {
        animation: none !important;
        opacity: 1 !important;
    }
}