/* Adzuna SOC Explorer — Phase 1 home page */

.aje-explorer {
    --aje-blue: #1d4ed8;
    --aje-blue-dark: #1e3a8a;
    --aje-text: #0f172a;
    --aje-muted: #64748b;
    --aje-border: #e5e7eb;
    --aje-card-bg: #ffffff;

    max-width: 1140px;
    margin: 0 auto;
    /* padding: 32px 24px 64px; */
    color: var(--aje-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.4;
    box-sizing: border-box;
}

.aje-explorer * {
    box-sizing: border-box;
}

/* ---------- hero ---------- */
.aje-hero {
    background: #005CAB;
    border-radius: 12px;
    padding: 24px;
}
.aje-eyebrow {
    margin-bottom: 0px;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 0px;
}
.aje-hero-title {
    color: #FFF;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 16px;
    margin-top: 16px;
}
.aje-hero-sub {
    max-width: 560px;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* ---------- stats ---------- */
.aje-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 28px 0 36px;
    border-bottom: 1px solid var(--aje-border);
    margin-bottom: 28px;
}
.aje-stat {
    flex: 0 1 220px;
    text-align: center;
    padding: 0 32px;
}
.aje-stat-num {
    color: #005CAB;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-stat-label {
    color: #5A6580;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-stat-divider {
    width: 1px;
    height: 56px;
    background: #DCE3F0;
}

/* ---------- card grid ---------- */
.aje-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.aje-card {
    --aje-accent: #94a3b8;
    --aje-accent-soft: #f1f5f9;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--aje-card-bg);
    border: 1px solid var(--aje-border);
    border-radius: 10px;
    overflow: hidden;
    padding: 20px 22px 22px 28px;
    text-decoration: none;
    color: inherit;
    min-height: 220px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.aje-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--aje-accent);
    pointer-events: none;
    z-index: 1;
}
.aje-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    gap: 32px;
}
.aje-card:hover,
.aje-card:focus-visible {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}
.aje-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.aje-badge {
    display: inline-block;
    border-radius: 999px;
    background: var(--aje-accent-soft);
    color: var(--aje-accent);
    text-align: center;
    font-family: "Nunito Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    height: 20px;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.aje-card-cats {
    color: #5A6580;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.aje-card-title {
    color: #005CAB;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--aje-border);
    padding-top: 5px;
}
.aje-card-num {
    color: #005CAB;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-card-num-label {
    color: #5A6580;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.aje-browse {
    display: inline-block;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    background: #005CAB;
    padding: 8px 24px;
    text-decoration: none !important;
}
.aje-card:hover .aje-browse,
.aje-card:focus-visible .aje-browse {
    background: #005CAB;
    color: #ffffff !important;
}

/* ---------- per-category accent colours ---------- */
.aje-card-1 { --aje-accent: #ec4899; --aje-accent-soft: #fce7f3; }
.aje-card-2 { --aje-accent: #06b6d4; --aje-accent-soft: #cffafe; }
.aje-card-3 { --aje-accent: #0ea5e9; --aje-accent-soft: #e0f2fe; }
.aje-card-4 { --aje-accent: #f59e0b; --aje-accent-soft: #fef3c7; }
.aje-card-5 { --aje-accent: #10b981; --aje-accent-soft: #d1fae5; }
.aje-card-6 { --aje-accent: #a855f7; --aje-accent-soft: #f3e8ff; }
.aje-card-7 { --aje-accent: #eab308; --aje-accent-soft: #fef9c3; }
.aje-card-8 { --aje-accent: #f97316; --aje-accent-soft: #ffedd5; }
.aje-card-9 { --aje-accent: #64748b; --aje-accent-soft: #e2e8f0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .aje-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aje-hero-title { font-size: 30px; }
    .aje-stat-num { font-size: 28px; }
    .aje-hero { padding: 28px 24px; }
}
@media (max-width: 560px) {
    .aje-cards { grid-template-columns: 1fr; }
    .aje-stats { flex-wrap: wrap; gap: 16px; }
    .aje-stat-divider { display: none; }
    .aje-stat { flex-basis: 100%; }
    .aje-hero-title { font-size: 26px; }
}

/* ---------- detail (drill-down) page ---------- */
.aje-detail-hero {
    background: #005CAB;
    color: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 24px;
    align-items: start;
}
.aje-detail-hero-main {
    min-width: 0;
}
.aje-detail-breadcrumb {
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 12px;
}
.aje-detail-breadcrumb-link {
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}
.aje-detail-breadcrumb-link:hover,
.aje-detail-breadcrumb-link:focus-visible {
    color: #fff;
    text-decoration: none;
}
.aje-detail-breadcrumb-sep {
    margin: 0px;
}
.aje-detail-breadcrumb-current {
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-detail-title {
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 14px;
}
.aje-detail-desc {
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    max-width: 720px;
}
.aje-detail-active {
    background: rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--aje-accent, #fff);
    border-radius: 6px;
    padding: 14px 18px 16px;
    align-self: start;
}
.aje-detail-active-label {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.aje-detail-active-num {
    color: #FFF;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 8px;
}
.aje-detail-active-link {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}
.aje-detail-active-link:hover,
.aje-detail-active-link:focus-visible {
    color: #fff;
    text-decoration: none;
}

.aje-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}
.aje-detail-children {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-content: start;
}
.aje-detail-empty {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    color: var(--aje-muted);
    background: #f8fafc;
    border: 1px dashed var(--aje-border);
    border-radius: 10px;
}

.aje-detail-locations {
    background: #fff;
    border: 1px solid var(--aje-border);
    border-radius: 10px;
    padding: 18px 0px 0px;
    align-self: start;
    --aje-accent: #005CAB;
}
.aje-loc-header {
    border-bottom: 1px solid var(--aje-border);
    padding: 0px 8px 10px 8px;
    margin-bottom: 10px;
}
.aje-loc-title {
    color: #005CAB;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 5px;
}
.aje-loc-sub {
    color: #5A6580;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.aje-loc-row {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    padding-left: 8px;
    padding-right: 8px;
}
.aje-loc-name {
    color: #5A6580;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aje-loc-bar {
    background: #eef2f7;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.aje-loc-bar-fill {
    background: var(--aje-accent);
    height: 100%;
    border-radius: 999px;
}
.aje-loc-bar-fill--low  { background: #E91E8C; }
.aje-loc-bar-fill--high { background: #005CAB; }
.aje-loc-num {
    text-align: right;
    color: #005CAB;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-loc-empty {
    padding: 14px 6px;
    text-align: center;
    color: var(--aje-muted);
    font-size: 13px;
}
.aje-loc-total {
    border-top:1px solid var(--aje-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    height: 48px;
    background: #F4F6FB;
    padding-left: 8px;
    padding-right: 8px;
}
.aje-loc-total-num {
    font-size: 18px;
    font-weight: 800;
    color: #005CAB;
}

@media (max-width: 1024px) {
    .aje-detail-grid {
        grid-template-columns: 1fr;
    }
    .aje-detail-locations {
        max-width: 480px;
    }
}
@media (max-width: 720px) {
    .aje-detail-hero {
        grid-template-columns: 1fr;
    }
    .aje-detail-children {
        grid-template-columns: 1fr;
    }
}

/* ---------- listing (vacancies table) ---------- */
.aje-listing {
    background: #fff;
    border: 1px solid #DCE3F0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.aje-listing-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--aje-border);
    flex-wrap: wrap;
}
.aje-listing-filters-label {
    color: #005CAB;
    font-size: 11px;
    font-weight: 700;
    margin-right: 6px;
}
.aje-listing-filter select,
.aje-listing-filter input[type="text"] {
    padding: 8px 14px;
    font-size: 13px;
    color: #0f172a;
    height: 36px;
    min-width: 140px;
    font-family: inherit;
    line-height: 1.2;
    border-radius: 4px;
    border: 1px solid #DCE3F0;
    background: #F4F6FB;
}
.aje-listing-filter select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%235A6580" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
.aje-listing-search {
    /* flex: 1; */
    min-width: 200px;
}
.aje-listing-search input {
    width: 100%;
    min-width: 0;
}
.aje-listing-filter input:focus,
.aje-listing-filter select:focus {
    /* outline: 2px solid #005CAB;
    outline-offset: -1px; */
}

.aje-listing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.aje-listing-table thead th {
    text-align: left;
    background: #F4F6FB;
    color: #5A6580;
    font-size: 10px;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 1px solid var(--aje-border);
    white-space: nowrap;
}
.aje-listing-table thead a {
    color: #5A6580;
    text-decoration: none;
}
.aje-listing-table thead a:hover {
    color: #005CAB;
}
.aje-sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 14px;
    color: #1F1F1F;
    line-height: 1;
}
.aje-sort-arrow-active {
    color: #1F1F1F;
}
.aje-listing-table tbody td {
    padding: 4px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #5A6580;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.aje-listing-table tbody tr:last-child td {
    border-bottom: none;
}
.aje-td-title a {
    color: var(--BeMore-Colors-DarkBlue, #005CAB);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}
.aje-td-title a:hover {
    text-decoration: underline;
}
.aje-pill-new {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #d1fae5;
    color: #047857;
    font-size: 9px;
    font-weight: 700;
    vertical-align: middle;
}
.aje-pill-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    color: var(--BeMore-Colors-DarkBlue, #005CAB);
    font-family: "Nunito Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 8px;
    background: #EAF1FB;
}
.aje-pill-loc-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #005CAB;
}
.aje-td-posted {
    color: #5A6580;
    white-space: nowrap;
}
.aje-td-action {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}
.aje-listing-empty {
    text-align: center;
    color: var(--aje-muted);
    padding: 40px;
}
.aje-listing-foot {
    padding: 16px 20px;
    background: #F4F6FB;
    text-align: center;
    color: #5A6580;
    font-size: 13px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px solid #DCE3F0;
}

.aje-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 16px 0 8px;
}
.aje-page,
.aje-page-arrow,
.aje-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    text-decoration: none;
    border-radius: 999px;
    color: var(--Light-Text-Primary, rgba(0, 0, 0, 0.87));
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 143%; /* 20.02px */
    letter-spacing: 0.17px;
}
.aje-page:hover,
.aje-page-arrow:hover {
    background: #f1f5f9;
    color: #005CAB;
}
.aje-page-current,.aje-page-current:hover {
    background: var(--light-action-focus-12-p, rgba(0, 0, 0, 0.12));
    font-weight: 700;
    color: var(--Light-Text-Primary, rgba(0, 0, 0, 0.87));
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    /* font-family: "Nunito Sans"; */
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 143%;
    letter-spacing: 0.17px;
}
.aje-page-arrow-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}
.aje-page-ellipsis {
    color: #94a3b8;
    pointer-events: none;
}

@media (max-width: 720px) {
    /* Filters stack one-per-row, each full width. */
    .aje-listing-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 1px;
    }
    .aje-listing-filters-label {
        margin-right: 0;
    }
    .aje-listing-filter,
    .aje-listing-search {
        width: 100%;
        flex: none;
        min-width: 0;
    }
    .aje-listing-filter select,
    .aje-listing-filter input[type="text"] {
        width: 100%;
        min-width: 0;
    }
    /* The date-range picker is a button, not a <select> — widen it too. */
    .aje-listing-filter .aje-datepicker,
    .aje-listing-filter .aje-datepicker-trigger {
        width: 100%;
    }

    /* Mobile: table -> stack of cards.
       Each <tr> becomes a card with named grid areas:

         title    pill   (NEW/OPEN, top-right)
         employer employer
         location posted
         action   action   (View button, right-aligned, top border)
    */
    .aje-listing-table {
        display: block;
        font-size: 13px;
        padding: 14px;
        background: #f8fafc;
    }
    .aje-listing-table thead { display: none; }
    .aje-listing-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .aje-listing-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title    title"
            "employer employer"
            "location posted"
            "action   action";
        row-gap: 6px;
        column-gap: 12px;
        align-items: center;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid var(--aje-border);
        border-radius: 10px;
    }
    /* The "no results" row spans the whole card stack. */
    .aje-listing-table tr:has(.aje-listing-empty) {
        display: block;
        padding: 18px;
        text-align: center;
        color: #5A6580;
    }
    .aje-listing-table td {
        padding: 0 !important;
        border: 0 !important;
        background: transparent;
    }

    /* Title cell: title link on left, NEW/OPEN pill pushed right. */
    .aje-td-title {
        grid-area: title;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
    }
    .aje-td-title a {
        flex: 1;
        font-weight: 700;
        color: #005CAB;
        line-height: 1.3;
    }
    .aje-pill-new {
        flex-shrink: 0;
    }

    .aje-td-employer {
        grid-area: employer;
        color: #1A1A2E;
        font-size: 13px;
    }
    .aje-td-location {
        grid-area: location;
    }
    .aje-td-posted {
        grid-area: posted;
        justify-self: end;
        color: #5A6580;
        font-size: 12px;
        white-space: nowrap;
    }

    /* View button row: separator above, button right-aligned. */
    .aje-td-action {
        grid-area: action;
        justify-self: end;
        padding-top: 10px !important;
        margin-top: 4px;
        width: 100%;
        border-top: 1px solid var(--aje-border) !important;
        display: flex;
        justify-content: flex-end;
    }
    .aje-td-action .aje-browse {
        padding: 8px 28px;
    }
    .aje-hero, .aje-detail-hero {
        padding: 24px !important;
        margin-left: 15px;
        margin-right: 15px;
    }
    .aje-stats{border: none !important;}
    .aje-cards, .aje-explorer{margin-left: 15px; margin-right: 15px;}
    .aje-listing-filter-group {
        gap: 6px !important;
        flex-direction: column;
    }
    .aje-listing,.aje-listing-filters{border: none !important;}
    .aje-listing-table{
        padding-left: 0px !important;
        padding-right: 0px !important;
        border: none !important;
        background: #fff !important;
    }
    .aje-listing-foot {
        border: none !important;
        background: #fff !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        height: auto !important;
    }
    .aje-pagination {
        padding-top: 0px !important;
    }
}

/* ---------- search page ---------- */
.aje-detail-active.aje-search-stat{
    border-left-color: #E03794 !important;
}
.aje-detail-active.aje-search-stat.page{
    border-left-color: #16A8E0 !important;
}
.aje-search-hero {
    align-items: stretch;
}
.aje-search-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aje-search-stat {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 12px 16px 14px;
    width: 100%;
}
.aje-search-summary {
    margin: 0 0 18px;
    color: #5A6580;
    font-size: 13px;
}
.aje-search-summary strong {
    color: #1A1A2E;
}

.aje-search-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

.aje-search-filters {
    background: #fff;
    border: 1px solid var(--aje-border);
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 16px;
}
.aje-search-filters-form {
    padding: 0;
}
.aje-search-filters-header {
    background: #005CAB;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 14px 18px;
}
.aje-search-filters-form > .aje-filter-group:first-of-type {
    margin-top: 18px;
}
.aje-filter-group {
    margin: 13px 18px 16px;
}
.aje-filter-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #5A6580;
    margin-bottom: 6px;
}
.aje-filter-input,
.aje-filter-select {
    width: 100%;
    border: 1px solid #DCE3F0;
    background: #F4F6FB;
    /* border-radius: 8px; */
    padding: 10px 14px;
    font-size: 13px;
    color: #0f172a;
    height: 40px;
    font-family: inherit;
    line-height: 1.2;
}
.aje-filter-input::placeholder {
    color: #94a3b8;
}
.aje-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%235A6580" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
.aje-filter-input:focus,
.aje-filter-select:focus {
    outline: 2px solid #005CAB;
    outline-offset: -1px;
}
.aje-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.aje-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #e0f2fe;
    color: #005CAB;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.aje-filter-pill a {
    color: #005CAB;
    text-decoration: none;
    line-height: 1;
    font-size: 14px;
}
.aje-filter-submit {
    width: calc(100% - 36px);
    margin: 4px 18px 8px;
    background: #005CAB;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.aje-filter-submit:hover {
    background: #003d75;
}
.aje-filter-clear {
    display: block;
    text-align: center;
    color: #5A6580;
    font-size: 12px;
    padding: 10px 18px 18px;
    text-decoration: none;
}
.aje-filter-clear:hover {
    color: #005CAB;
}

.aje-search-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.aje-search-empty {
    background: #f8fafc;
    border: 1px dashed var(--aje-border);
    border-radius: 10px;
    padding: 60px;
    text-align: center;
    color: var(--aje-muted);
}

.aje-vc {
    background: #fff;
    border: 1px solid var(--aje-border);
    border-radius: 10px;
    padding: 18px 22px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.aje-vc:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}
.aje-vc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.aje-vc-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.aje-vc-title a {
    color: var(--BeMore-Colors-DarkBlue, #005CAB);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}
.aje-vc-title a:hover {
    text-decoration: none;
}
.aje-vc-date {
    color: #5A6580;
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}
.aje-vc-meta {
    color: #5A6580;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.aje-vc-meta-item {
    display: inline-block;
}
.aje-vc-meta-sep {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1;
}
.aje-vc-soc {
    display: inline-block;
    background: #EAF1FB;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    color: var(--BeMore-Colors-DarkBlue, #005CAB);
    text-align: center;
    font-family: "Nunito Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-vc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--aje-border);
    padding-top: 5px;
}
.aje-vc-salary {
    color: #9AAABF;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media (max-width: 900px) {
    .aje-search-grid {
        grid-template-columns: 1fr;
    }
    .aje-search-filters {
        position: static;
    }
    .aje-search-stats {
        flex-direction: row;
    }
    .aje-search-stat {
        flex: 1;
    }
}
@media (max-width: 560px) {
    .aje-search-stats {
        flex-direction: column;
    }
}

/* ---------- error fallback ---------- */
.aje-error {
    padding: 16px 20px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 14px;
}
.aje-error code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* ============================================================
 * Date-range picker (replaces the date_preset <select>)
 * ============================================================ */
.aje-datepicker {
    position: relative;
    display: inline-block;
}
.aje-datepicker--sidebar {
    display: block;
    width: 100%;
}

.aje-datepicker-trigger, .aje-datepicker-trigger:hover {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: inherit;
    padding: 8px 14px;
    height: 36px;
    min-width: 160px;
    cursor: pointer;
    text-align: left;
    border-radius: 0px !important;
    border: 1px solid #DCE3F0;
    background: #F4F6FB !important;
    color: #5A6580 !important;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.aje-datepicker--sidebar .aje-datepicker-trigger {
    width: 100%;
    height: 40px;
    padding: 10px 14px;
}
.aje-datepicker-trigger:hover {
    border-color: #94a3b8;
}
.aje-datepicker-trigger:focus,
.aje-datepicker.is-open .aje-datepicker-trigger {
    outline: 2px solid #005CAB;
    outline-offset: -1px;
}
.aje-datepicker-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.aje-datepicker-caret {
    color: #5A6580;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aje-datepicker-panel {
    /* position: fixed so the popover escapes any ancestor with
       overflow:hidden (the listing/sidebar cards both clip). JS sets
       top/left based on the trigger's bounding rect. */
    position: fixed;
    z-index: 9998;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--aje-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    padding: 8px;
}

.aje-datepicker-presets {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aje-datepicker-presets li {
    margin: 0;
}
.aje-datepicker-preset {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    color: #0f172a;
    cursor: pointer;
}
.aje-datepicker-preset:hover {
    background: #f1f5f9;
}
.aje-datepicker-preset.is-active {
    background: #005CAB;
    color: #fff;
}

.aje-datepicker-custom {
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
    padding: 10px 4px 4px;
}
.aje-datepicker-custom-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #5A6580;
    margin-bottom: 8px;
    padding: 0 8px;
}
.aje-datepicker-fields {
    display: flex;
    gap: 6px;
    padding: 0 4px;
}
.aje-datepicker-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--aje-border);
    border-radius: 6px;
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    color: #0f172a;
    background: #fff;
    cursor: pointer;
}
.aje-datepicker-input:focus {
    outline: 2px solid #005CAB;
    outline-offset: -1px;
}
.aje-datepicker-apply {
    display: block;
    width: calc(100% - 8px);
    margin: 10px 4px 4px;
    background: #005CAB;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.aje-datepicker-apply:hover {
    background: #004a8c;
}

/* ============================================================
 * jQuery UI datepicker — minimal theme so we don't ship the
 * full jquery-ui.css. Selectors mirror jQuery UI 1.13 markup.
 * ============================================================ */
.ui-datepicker {
    width: 260px;
    background: #fff;
    border: 1px solid var(--aje-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
    color: #0f172a;
    z-index: 9999 !important;
    display: none;
}
.ui-datepicker.ui-datepicker-multi { width: auto; }
.ui-datepicker-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 8px;
    margin-bottom: 4px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: 4px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    line-height: 26px;
    color: #5A6580;
    user-select: none;
}
.ui-datepicker-prev { left: 0; }
.ui-datepicker-next { right: 0; }
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover { background: #f1f5f9; color: #0f172a; }
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon { display: none; }
.ui-datepicker-prev::before { content: '‹'; font-size: 18px; }
.ui-datepicker-next::before { content: '›'; font-size: 18px; }
.ui-datepicker-prev.ui-state-disabled,
.ui-datepicker-next.ui-state-disabled { opacity: 0.35; cursor: default; }

.ui-datepicker-title {
    display: flex;
    gap: 6px;
    font-weight: 600;
}
.ui-datepicker-title select {
    appearance: auto;
    border: 1px solid var(--aje-border);
    border-radius: 6px;
    background: #fff;
    padding: 2px 6px;
    font: inherit;
    font-size: 12px;
}

.ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.ui-datepicker-calendar th {
    padding: 6px 0;
    font-size: 11px;
    font-weight: 600;
    color: #5A6580;
    text-align: center;
}
.ui-datepicker-calendar td {
    padding: 1px;
    text-align: center;
}
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    display: block;
    padding: 6px 0;
    border-radius: 6px;
    color: #0f172a;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
}
.ui-datepicker-calendar td a:hover { background: #e2e8f0; }
.ui-datepicker-calendar td .ui-state-active,
.ui-datepicker-calendar td a.ui-state-active { background: #005CAB; color: #fff; }
.ui-datepicker-calendar td .ui-state-highlight { outline: 1px solid #005CAB; }
.ui-datepicker-calendar td.ui-datepicker-other-month span,
.ui-datepicker-calendar td.ui-datepicker-unselectable span { color: #cbd5e1; }
.ui-datepicker-calendar td.ui-datepicker-week-end a { color: #0f172a; }

/* ============================================================
 * Topbar — back button + expandable search.
 * Sits at the very top of detail / listing / search pages.
 * ============================================================ */
.aje-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0px 18px;
}
/* Home page has no back button — keep the search box pinned right. */
.aje-topbar--no-back {
    justify-content: flex-end;
}

.aje-topbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: #0f172a;
    background: transparent;
    text-decoration: none;
    transition: background 120ms ease;
}
.aje-topbar-back:hover,
.aje-topbar-back:focus {
    background: #f1f5f9;
    color: #0f172a;
    outline: none;
}

.aje-topbar-search {
    display: flex;
    align-items: center;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--aje-border);
    border-radius: 999px;
    width: 292px;
    height: 33px;
    padding: 4px 16px;
    border-radius: 32px;
    background: #F3F3F3;
}
.aje-topbar-search:focus-within {
    border-color: #005CAB;
}
.aje-topbar-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5A6580;
    margin-right: 8px;
    flex-shrink: 0;
}
.aje-topbar-search-input {
    border-bottom: 0px !important;
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: #0f172a;
    padding: 6px 0;
}
.aje-topbar-search-input::placeholder {
    color: #5A6580;
}

@media (max-width: 640px) {
    .aje-topbar-search { width: 100%; }
}

/* ============================================================
 * Theme override.
 * Some themes apply `border-width: 0 0 1px !important` globally to
 * <input>/<select>, which collapses our pill borders to a single
 * underline. Re-assert a full 1px box border for our controls.
 * Scoped under .aje-explorer so it only affects this plugin's pages.
 * The topbar search input is intentionally borderless (the wrapping
 * pill carries the border), so it's excluded.
 * ============================================================ */
.aje-explorer input:not(.aje-topbar-search-input),
.aje-explorer select {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--aje-border) !important;
}
#aje-filter-q{
    padding: 6px 14px;
border: 1px solid #DCE3F0;
background: #F4F6FB;
}

/* ============================================================
 * Vacancy detail page
 * ============================================================ */
.aje-vacancy-hero {
    grid-template-columns: 1fr; /* override the 1fr 240px from .aje-detail-hero */
}

.aje-vacancy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    /* Two-column on desktop:
         row 1: main      | rail
         row 2: suggested | rail
       The rail (Key Details / Employer / SOC) spans both rows so it stays
       beside the description AND the suggested cards.
       On narrow viewports the columns collapse and the explicit order
       becomes: main, rail, suggested — so the user reads Key Details
       before Suggested Opportunities, matching the desktop visual order. */
    grid-template-areas:
        "main rail"
        "suggested rail";
    gap: 24px;
    align-items: start;
}
.aje-vacancy-main { grid-area: main; min-width: 0; }
.aje-vacancy-rail { grid-area: rail; }
.aje-vacancy-grid > .aje-suggested { grid-area: suggested; min-width: 0; }
.aje-vacancy-content {
    background: #fff;
    border: 1px solid var(--aje-border);
    border-radius: 12px;
    padding: 28px 32px;
}
.aje-vacancy-section-title {
    color: #005CAB;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aje-border);
}
.aje-vacancy-desc {
    color: #5A6580;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.aje-vacancy-desc p { margin: 0 0 12px; }
.aje-vacancy-desc ul,
.aje-vacancy-desc ol { margin: 0 0 12px 22px; padding: 0; }
.aje-vacancy-desc li { margin: 0 0 4px; }
.aje-vacancy-desc h2,
.aje-vacancy-desc h3,
.aje-vacancy-desc h4 {
    color: #005CAB;
    font-size: 14px;
    font-weight: 700;
    margin: 18px 0 8px;
}

.aje-vacancy-apply-row { margin: 18px 0 0; }
.aje-vacancy-apply {
    display: inline-block;
    padding: 10px 22px;
    font-size: 13px;
}

/* Right rail — sticky on scroll, like the search filter sidebar. */
.aje-vacancy-rail {
    position: sticky;
    top: 16px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aje-vacancy-card {
    background: #fff;
    border: 1px solid var(--aje-border);
    border-radius: 12px;
    padding: 18px 20px;
}
.aje-vacancy-card-title ,.aje-vacancy-card-title{
    color: #005CAB;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--aje-border);
    text-transform: none;
}
/* .aje-vacancy-soc .aje-vacancy-card-title,
.aje-vacancy-employer .aje-vacancy-card-title {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #5A6580;
} */

.aje-vacancy-kv {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 10px;
}
.aje-vacancy-kv dt {
    color: #5A6580;
    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-vacancy-kv dd {
    margin: 0;
    color: #005CAB;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}
.aje-vacancy-kv dd.postedon, .aje-vacancy-kv dd.textmuted{
    color: #5A6580;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-vacancy-keys .aje-vacancy-apply {
    display: block;
    text-align: center;
    margin-top: 14px;
    width: 100%;
    box-sizing: border-box;
}

.aje-vacancy-employer-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.aje-vacancy-logo {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #f1f5f9;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aje-vacancy-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.aje-vacancy-employer-name {
    color: #005CAB;
    font-size: 14px;
    font-weight: 700;
}
.aje-vacancy-employer-via {
    color: #5A6580;
    font-size: 12px;
    margin-top: 2px;
}

/* ============================================================
 * Suggested Opportunities (vacancy detail)
 * ============================================================ */
.aje-suggested {
    margin-top: 32px;
}
.aje-suggested-heading {
    color: #005CAB;
    font-size: 10px;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aje-border);
}
.aje-suggested-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.aje-suggested-card {
    border-radius: 8px;
    border: 1px solid #DCE3F0;
    background: #F4F6FB;
    padding: 6px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aje-suggested-title {
    color: #005CAB;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.aje-suggested-title:hover { text-decoration: underline; }
.aje-suggested-meta {
    color: #5A6580;
    font-size: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.aje-suggested-tag {
    align-self: flex-start;
    background: #EAF1FB;
    height: 18px;
    padding: 4px 10px 3px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BeMore-Colors-DarkBlue, #005CAB);
    text-align: center;
    /* font-family: Montserrat; */
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.aje-suggested-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}
.aje-suggested-salary {
    color: var(--BeMore-Colors-DarkBlue, #005CAB);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 900px) {
    .aje-vacancy-grid {
        grid-template-columns: 1fr;
        /* On mobile: main, then rail (Key Details/Employer/SOC), then suggested. */
        grid-template-areas:
            "main"
            "rail"
            "suggested";
    }
    .aje-vacancy-rail { position: static; }
    .aje-suggested-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Home hero — full-bleed banner with aligned inner content.
 * The hero now lives OUTSIDE .aje-explorer (so it naturally takes
 * the parent wrapper's full width). The inner wrapper mirrors
 * .aje-explorer's max-width + side padding, so the title text
 * lines up exactly with the stats / cards rendered below.
 *
 * Only targets the home banner (.aje-hero). The drill-down /
 * listing / vacancy heroes (.aje-detail-hero) keep their existing
 * inset-card look.
 * ============================================================ */
.aje-hero {
    background: #005CAB;
    border-radius: 0;
    padding: 32px 0;
    box-sizing: border-box;
}
.aje-hero-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0px;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .aje-hero { padding: 28px 0; }
}

@media (min-width: 1920px) {
    .aje-explorer {
        max-width: 1320px;
        margin: 0 auto;
    }
}
@media (min-width: 1280px) {
    .aje-explorer{max-width: 1140px;margin: 0 auto;margin-bottom: 24px;}
}

/* ============================================================
 * Inner-page hero — full-bleed banner with aligned inner content.
 * Mirrors the home-hero pattern: the .aje-detail-hero is now a
 * top-level sibling of .aje-explorer, so it spans the parent
 * wrapper's full width. The .aje-detail-hero-inner div mirrors
 * .aje-explorer's max-width + centering so the title / breadcrumb
 * line up exactly with the content card below.
 *
 * Also styles .aje-topbar-wrap (centers the back-button + search
 * row above the hero) to share the same column.
 * ============================================================ */
.aje-topbar-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0px;
    box-sizing: border-box;
}

/* Override the inset-card defaults — full-bleed treatment. */
.aje-detail-hero {
    border-radius: 0 !important;
    /* padding: 28px 0 !important; */
    margin-bottom: 24px;
    /* Reset grid: the grid layout moves to .aje-detail-hero-inner. */
    display: block;
}

/* Centered inner wrapper, mirrors .aje-explorer's column. */
.aje-detail-hero-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0px;
    box-sizing: border-box;
    /* Two-column layout (title + stats card) was on .aje-detail-hero
       before — move it here so it lines up inside the centered column. */
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 24px;
    align-items: start;
}

/* Pages whose hero has no right-side stats card (e.g. vacancy detail)
   should collapse the inner grid to a single column. The wrapper
   `.aje-vacancy-hero` is the only such variant currently. */
.aje-vacancy-hero .aje-detail-hero-inner {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .aje-detail-hero-inner { grid-template-columns: 1fr; }
}

.aje-listing-filter-group{
    display: flex;
    align-items: center;
    gap: 20px;
}
.aje-explorer--listing .aje-datepicker-trigger{
    border-radius: 4px !important;
}

/* Standalone [adzuna_soc_cards] shortcode — just the card grid,
   embeddable on any page. Adds a little vertical breathing room. */
.aje-explorer--cards-only {
    padding: 24px 0;
}