/*
 * Butler National Job Board — Stylesheet v3.0
 * Matches Butler National site: white bg, navy text, blue buttons, red accents.
 * Container width inherits from active theme automatically.
 */

:root {
    --bjb-navy:       #162138;
    --bjb-navy-mid:   #192063;
    --bjb-hero-bg:    #2b3d94;
    --bjb-blue:       #0553a2;
    --bjb-blue-hover: #044488;
    --bjb-red:        #bb0000;
    --bjb-red-hover:  #990000;
    --bjb-white:      #ffffff;
    --bjb-light:      #f5f6f8;
    --bjb-mid-gray:   #d4d8de;
    --bjb-text:       #162138;
    --bjb-text-light: #6b7280;
    --bjb-border:     #e2e5ea;
    --bjb-font:       'Archivo', Arial, Helvetica, sans-serif;
    --bjb-radius-btn: 30px;
    --bjb-radius-md:  6px;
    --bjb-shadow-sm:  0 2px 8px rgba(22,33,56,.08);
    --bjb-shadow-md:  0 4px 20px rgba(22,33,56,.12);
    --bjb-transition: 0.22s ease;
}

/* ── CRITICAL: never touch theme navigation ──────────────────── */
.main-navigation a,
.fusion-main-menu a,
.fusion-main-menu li a,
header nav a,
#masthead a {
    text-decoration: none !important;
}

/* ── Base ────────────────────────────────────────────────────── */
.bjb-wrap {
    font-family: var(--bjb-font);
    color: var(--bjb-text);
    padding: 2rem 0 3rem;
}

/*
 * bjb-container — intentionally matches the theme's content width.
 * Uses the same max-width and padding as the Avcon/Butler themes.
 * On Butler National (Avada) the content sits inside .fusion-row
 * which is already constrained. We use 100% width so the hero
 * full-bleed works, and constrain only the inner content.
 */
.bjb-container {
    width: 100%;
    max-width: var(--container-max, var(--container_width, 1200px));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad, clamp(1rem, 4vw, 2.5rem));
    padding-right: var(--container-pad, clamp(1rem, 4vw, 2.5rem));
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH BAR — white card, red separator, blue search button
═══════════════════════════════════════════════════════════════ */
.bjb-filter-form {
    margin-bottom: 2rem;
    border: 1px solid var(--bjb-border);
    border-radius: var(--bjb-radius-md);
    overflow: hidden;
    box-shadow: var(--bjb-shadow-sm);
}
.bjb-search-row {
    display: flex;
    gap: 0;
    background: var(--bjb-white);
    padding: 1.25rem 1.5rem;
    border-bottom: 3px solid var(--bjb-red);
    align-items: center;
}
.bjb-search-input-wrap {
    position: relative;
    flex: 1;
}
.bjb-search-input-wrap svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--bjb-text-light);
    pointer-events: none;
}
.bjb-search-input {
    width: 100%;
    padding: .75rem 1rem .75rem 2.75rem;
    background: var(--bjb-light);
    border: 1px solid var(--bjb-border);
    border-right: none;
    border-radius: var(--bjb-radius-btn) 0 0 var(--bjb-radius-btn);
    color: var(--bjb-text);
    font-family: var(--bjb-font);
    font-size: .95rem;
    transition: border-color var(--bjb-transition);
    box-sizing: border-box;
}
.bjb-search-input::placeholder { color: var(--bjb-text-light); }
.bjb-search-input:focus {
    outline: none;
    border-color: var(--bjb-blue);
    background: var(--bjb-white);
}
.bjb-search-btn {
    padding: .75rem 2rem;
    background: var(--bjb-blue);
    color: var(--bjb-white);
    border: 1px solid var(--bjb-blue);
    border-radius: 0 var(--bjb-radius-btn) var(--bjb-radius-btn) 0;
    font-family: var(--bjb-font);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--bjb-transition), border-color var(--bjb-transition);
}
.bjb-search-btn:hover { background: var(--bjb-navy); border-color: var(--bjb-navy); }

/* Filter dropdowns row */
.bjb-filters-row {
    display: flex;
    gap: 1rem;
    background: var(--bjb-light);
    padding: 1rem 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.bjb-filter-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
    min-width: 140px;
}
.bjb-filter-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bjb-text-light);
}
.bjb-select {
    padding: .55rem .9rem;
    background: var(--bjb-white);
    border: 1px solid var(--bjb-border);
    border-radius: var(--bjb-radius-btn);
    color: var(--bjb-text);
    font-family: var(--bjb-font);
    font-size: .85rem;
    cursor: pointer;
    transition: border-color var(--bjb-transition);
}
.bjb-select:focus { outline: none; border-color: var(--bjb-blue); }

/* Results header */
.bjb-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.bjb-results-count { font-size: .9rem; color: var(--bjb-text-light); margin: 0; }
.bjb-clear-filters {
    font-size: .82rem;
    color: var(--bjb-red);
    text-decoration: underline;
    cursor: pointer;
}
.bjb-clear-filters:hover { color: var(--bjb-navy); }

/* ═══════════════════════════════════════════════════════════════
   JOB LIST ROWS
═══════════════════════════════════════════════════════════════ */
.bjb-job-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--bjb-border);
    border: 1px solid var(--bjb-border);
    border-radius: var(--bjb-radius-md);
    overflow: hidden;
}
.bjb-job-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 1.75rem;
    background: var(--bjb-white);
    position: relative;
    transition: background var(--bjb-transition), border-left-color var(--bjb-transition);
    border-left: 4px solid transparent;
}
.bjb-job-row:hover { background: #fafbfc; border-left-color: var(--bjb-red); }
.bjb-job-row--featured { border-left-color: var(--bjb-red); }
.bjb-featured-badge {
    position: absolute;
    top: 0;
    right: 1.25rem;
    background: var(--bjb-red);
    color: var(--bjb-white);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .2rem .65rem;
    border-radius: 0 0 4px 4px;
}
.bjb-job-row__main { flex: 1; min-width: 0; }
.bjb-job-row__meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.bjb-job-row__title {
    margin: 0 0 .6rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bjb-navy);
    line-height: 1.3;
}
.bjb-job-row__title a { color: inherit; text-decoration: none !important; transition: color var(--bjb-transition); }
.bjb-job-row__title a:hover { color: var(--bjb-blue); }
.bjb-job-row__details { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .5rem; }
.bjb-detail-item { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--bjb-text-light); }
.bjb-detail-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.bjb-salary { color: var(--bjb-navy); font-weight: 600; }
.bjb-deadline { color: var(--bjb-red); }
.bjb-job-row__excerpt {
    font-size: .88rem;
    color: var(--bjb-text-light);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bjb-job-row__actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex-shrink: 0;
    align-items: stretch;
    min-width: 130px;
}

/* Tags on job cards */
.bjb-tag {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: var(--bjb-radius-btn);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(22,33,56,.07);
    color: var(--bjb-navy);
}
.bjb-tag--cat    { background: rgba(5,83,162,.10);  color: var(--bjb-blue); }
.bjb-tag--type   { background: rgba(187,0,0,.08);   color: var(--bjb-red); }
.bjb-tag--style  { background: rgba(22,33,56,.05);  color: var(--bjb-text-light); }

/* Tags in hero — plain white text, no background, no border */
.bjb-page-hero .bjb-tag,
.bjb-page-hero .bjb-tag--bu,
.bjb-page-hero .bjb-tag--cat,
.bjb-page-hero .bjb-tag--type,
.bjb-page-hero .bjb-tag--style {
    background: transparent !important;
    background-color: transparent !important;
    color: rgba(255,255,255,.8) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 .75rem 0 0 !important;
    font-size: .75rem !important;
    letter-spacing: .1em !important;
}

/* Buttons */
.bjb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.25rem;
    border-radius: var(--bjb-radius-btn);
    font-family: var(--bjb-font);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--bjb-transition);
    white-space: nowrap;
}
.bjb-btn--primary {
    background: var(--bjb-red) !important;
    color: var(--bjb-white) !important;
    border-color: var(--bjb-red) !important;
}
.bjb-btn--primary:hover {
    background: var(--bjb-red-hover) !important;
    border-color: var(--bjb-red-hover) !important;
    color: var(--bjb-white) !important;
}
.bjb-btn--outline {
    background: transparent !important;
    color: var(--bjb-blue) !important;
    border-color: var(--bjb-blue) !important;
}
.bjb-btn--outline:hover {
    background: var(--bjb-blue) !important;
    color: var(--bjb-white) !important;
}
.bjb-btn--large { padding: .9rem 2.5rem; font-size: .95rem; }

/* No results */
.bjb-no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--bjb-text-light);
    background: var(--bjb-light);
    border-radius: var(--bjb-radius-md);
    border: 1px solid var(--bjb-border);
}
.bjb-no-results svg { display: block; margin: 0 auto 1rem; width: 56px; height: 56px; opacity: .2; }
.bjb-no-results h3 { color: var(--bjb-navy); margin-bottom: .5rem; }

/* Pagination */
.bjb-pagination { display: flex; align-items: center; gap: .5rem; margin-top: 2rem; justify-content: center; flex-wrap: wrap; }
.bjb-page-btn {
    display: inline-flex;
    align-items: center;
    padding: .5rem .9rem;
    border: 1px solid var(--bjb-border);
    border-radius: var(--bjb-radius-btn);
    font-size: .88rem;
    color: var(--bjb-text);
    text-decoration: none !important;
    background: var(--bjb-white);
    transition: all var(--bjb-transition);
}
.bjb-page-btn:hover { background: var(--bjb-blue); border-color: var(--bjb-blue); color: var(--bjb-white) !important; }
.bjb-page-btn.is-current { background: var(--bjb-navy); border-color: var(--bjb-navy); color: var(--bjb-white) !important; }

/* ═══════════════════════════════════════════════════════════════
   SINGLE JOB PAGE HERO
   Full bleed background, content constrained by .bjb-container
   which inherits from the active theme's container width.
═══════════════════════════════════════════════════════════════ */
.bjb-page-hero {
    background-color: var(--bjb-hero-bg);
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Match whatever padding the active theme uses for full-width sections */
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
    padding-left: 0;
    padding-right: 0;
}
.bjb-page-hero .bjb-container {
    /* Extra safety: match Avada's container padding on Butler site */
    padding-left: clamp(1.5rem, 4vw, 3rem);
    padding-right: clamp(1.5rem, 4vw, 3rem);
}
.bjb-hero-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--bjb-red);
}
.bjb-breadcrumb {
    font-size: .8rem;
    color: rgba(255,255,255,.55);
    margin-bottom: 1rem;
    display: block;
}
.bjb-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none !important; }
.bjb-breadcrumb a:hover { color: var(--bjb-white); }
.bjb-breadcrumb span { margin: 0 .4rem; }
.bjb-hero-tags {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    align-items: center;
}
.bjb-hero-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--bjb-white);
    margin: 0 0 .75rem;
    line-height: 1.15;
    display: block;
}
.bjb-hero-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: .9rem;
    color: rgba(255,255,255,.7);
}

/* Single job content area */
.bjb-single-wrap {
    padding: 3rem 0 4rem;
    background: var(--bjb-white);
}
.bjb-single-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 900px) { .bjb-single-layout { grid-template-columns: 1fr; } }

.bjb-job-content .entry-content { color: var(--bjb-text); }
.bjb-job-content .entry-content h2,
.bjb-job-content .entry-content h3 { color: var(--bjb-navy); margin-top: 2rem; }
.bjb-job-content .entry-content p { color: var(--bjb-text); max-width: none; }
.bjb-job-content .entry-content ul,
.bjb-job-content .entry-content ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.bjb-job-content .entry-content li { color: var(--bjb-text); margin-bottom: .35rem; }

/* Apply Now bottom section */
.bjb-apply-bottom {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 4px solid var(--bjb-red);
}
.bjb-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--bjb-text-light);
    text-decoration: none !important;
    margin-top: 1.5rem;
    transition: color var(--bjb-transition);
}
.bjb-back-link:hover { color: var(--bjb-red); }

/* Sidebar detail card */
.bjb-detail-card {
    background: var(--bjb-light);
    border: 1px solid var(--bjb-border);
    border-left: 4px solid var(--bjb-red);
    border-radius: var(--bjb-radius-md);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.bjb-detail-card__title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bjb-navy);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--bjb-border);
}
.bjb-detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.bjb-detail-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; font-size: .88rem; }
.bjb-dl-label { color: var(--bjb-text-light); font-size: .8rem; flex-shrink: 0; }
.bjb-dl-value { color: var(--bjb-text); font-weight: 600; text-align: right; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bjb-search-row { flex-direction: column; padding: 1rem; }
    .bjb-search-input { border-right: 1px solid var(--bjb-border); border-bottom: none; border-radius: var(--bjb-radius-btn) var(--bjb-radius-btn) 0 0; }
    .bjb-search-btn { border-radius: 0 0 var(--bjb-radius-btn) var(--bjb-radius-btn); width: 100%; justify-content: center; }
    .bjb-filters-row { flex-direction: column; padding: 1rem; }
    .bjb-filter-group { min-width: unset; }
    .bjb-job-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .bjb-job-row__actions { flex-direction: row; min-width: unset; width: 100%; }
    .bjb-job-row__actions .bjb-btn { flex: 1; }
    .bjb-single-layout { grid-template-columns: 1fr; }
}