/* ============================================================================
   Daily B.Com Jobs board.

   Sibling of the Daily Tech Jobs board and deliberately the same layout
   language (hero, card list, single-job page) so the two read as one family.
   The accent shifts from the tech blue to a commerce teal so a reader always
   knows which board they are on.

   External on purpose: the tech board carries its styles inline, which is why
   nothing there can be reused. This file is the shared-stylesheet version of
   the same system and is what any future board should link.
   ========================================================================== */

:root {
    --bj-accent:      #0f766e;
    --bj-accent-dark: #115e59;
    --bj-action:      #0b66d0;
    --bj-ink:         #1f2937;
    --bj-muted:       #5b6472;
    --bj-bg:          #f4f6f9;
    --bj-card:        #ffffff;
    --bj-line:        #e3e8ef;
    --bj-chip-bg:     #f1f5f9;
    --bj-chip-ink:    #475569;
    --bj-good:        #1e8e3e;
    --bj-new:         #b45309;
}

* { box-sizing: border-box; }

body {
    background-color: var(--bj-bg);
    color: var(--bj-ink);
    font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}
a { color: var(--bj-action); }
img { max-width: 100%; }

/* ---- Hero ---- */
.bj-hero {
    background: linear-gradient(90deg, var(--bj-accent), var(--bj-accent-dark));
    color: #fff; text-align: center; padding: 28px 16px 24px;
}
.bj-hero-brand { font-size: 12px; letter-spacing: 2px; font-weight: 700; opacity: .85; text-transform: uppercase; }
.bj-hero-brand span { letter-spacing: 0; text-transform: none; font-weight: 400; opacity: .9; }
.bj-hero h1 { font-size: 2rem; font-weight: 700; margin: 10px 0 8px; }
.bj-hero-sub { font-size: 1rem; max-width: 660px; margin: 0 auto; opacity: .95; line-height: 1.5; }
.bj-hero-chip {
    display: inline-block; margin-top: 14px; background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
    padding: 6px 16px; font-size: 14px; font-weight: 600;
}

/* ---- Shell ---- */
.bj-wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.bj-ad-top { max-width: 1200px; margin: 12px auto 0; padding: 0 15px; min-height: 100px; }
.adsbygoogle { display: block; width: 100%; text-align: center; margin: auto; }

/* ---- Filter row: experience is segmented, never used to hide roles ---- */
.bj-filters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 18px auto 4px; max-width: 1200px; padding: 0 15px;
}
.bj-filter {
    background: var(--bj-card); border: 1px solid var(--bj-line); border-radius: 999px;
    padding: 7px 15px; font-size: 14px; font-weight: 600; color: var(--bj-chip-ink);
    cursor: pointer; transition: all .15s ease;
}
.bj-filter:hover { border-color: var(--bj-accent); color: var(--bj-accent); }
.bj-filter.is-active { background: var(--bj-accent); border-color: var(--bj-accent); color: #fff; }
.bj-count { color: var(--bj-muted); font-size: 14px; margin-left: auto; }

/* ---- Job cards ---- */
.bj-list { display: grid; gap: 12px; margin: 14px auto 28px; max-width: 1200px; padding: 0 15px; }
.bj-card {
    background: var(--bj-card); border: 1px solid var(--bj-line); border-radius: 12px;
    padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.bj-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.07); border-color: #cfd8e3; }
.bj-logo {
    width: 42px; height: 42px; border-radius: 9px; flex: 0 0 42px;
    background: var(--bj-chip-bg); display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--bj-chip-ink); overflow: hidden;
}
.bj-logo img { width: 100%; height: 100%; object-fit: contain; }
.bj-body { flex: 1; min-width: 0; }

/* The decoded label leads, because "PD - AP" means nothing to a student.
   The employer's own title is kept verbatim underneath it. */
.bj-plain { font-size: 1.06rem; font-weight: 700; margin: 0 0 2px; line-height: 1.3; }
.bj-plain a { color: var(--bj-ink); text-decoration: none; }
.bj-plain a:hover { color: var(--bj-accent); }
.bj-astitle { font-size: 12.5px; color: var(--bj-muted); margin: 0 0 7px; }
.bj-astitle code {
    background: var(--bj-chip-bg); border-radius: 4px; padding: 1px 6px;
    font-size: 12px; color: var(--bj-chip-ink);
}
.bj-co { font-size: 14px; font-weight: 600; color: var(--bj-accent); margin: 0 0 6px; }

.bj-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bj-chip {
    background: var(--bj-chip-bg); color: var(--bj-chip-ink); border-radius: 6px;
    padding: 3px 9px; font-size: 12.5px; font-weight: 500;
}
.bj-chip-new { background: #fef3c7; color: var(--bj-new); font-weight: 700; }
.bj-chip-fresher { background: #dcfce7; color: var(--bj-good); font-weight: 600; }

.bj-apply {
    flex: 0 0 auto; align-self: center;
    background: var(--bj-accent); color: #fff; text-decoration: none;
    border-radius: 8px; padding: 9px 18px; font-weight: 700; font-size: 14px;
    white-space: nowrap;
}
.bj-apply:hover { background: var(--bj-accent-dark); color: #fff; }

/* ---- Empty + honesty states ---- */
.bj-empty {
    background: var(--bj-card); border: 1px dashed var(--bj-line); border-radius: 12px;
    padding: 34px 20px; text-align: center; color: var(--bj-muted);
}
.bj-note {
    max-width: 1200px; margin: 14px auto 0; padding: 10px 16px;
    background: #fff7e6; border: 1px solid #ffe1a8; border-radius: 10px;
    color: #7a5a1e; font-size: 14px; text-align: center;
}
.bj-note a { font-weight: 700; }

/* ---- Join the daily channels ----
   The board is the shop window; the channels are where the audience actually
   compounds. Placed after the list, so it is read once someone has seen the jobs
   are real, and never as an interstitial over them. */
.bj-join {
    background: linear-gradient(90deg, var(--bj-accent), var(--bj-accent-dark));
    color: #fff; border-radius: 12px; padding: 22px 24px;
    margin: 8px auto 20px; max-width: 1200px; text-align: center;
}
.bj-join h2 { font-size: 1.15rem; margin: 0 0 6px; }
.bj-join p { margin: 0 auto 16px; font-size: 14.5px; opacity: .95; max-width: 620px; line-height: 1.55; }
.bj-join-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bj-join-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--bj-accent-dark); text-decoration: none;
    border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: 14px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.bj-join-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); color: var(--bj-accent-dark); }
.bj-join-btn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.bj-join-btn.is-wa svg { fill: #25D366; }
.bj-join-btn.is-tg svg { fill: #229ED9; }
.bj-join-note { margin: 14px 0 0; font-size: 12.5px; opacity: .85; }

@media (max-width: 640px) {
    .bj-join-btn { width: 100%; justify-content: center; }
}

/* ---- Glossary: the thing that makes these listings readable ---- */
.bj-gloss {
    background: var(--bj-card); border: 1px solid var(--bj-line); border-radius: 12px;
    padding: 18px 20px; margin: 8px auto 28px; max-width: 1200px;
}
.bj-gloss h2 { font-size: 1.05rem; margin: 0 0 4px; }
.bj-gloss p { color: var(--bj-muted); font-size: 14px; margin: 0 0 12px; }
.bj-gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; }
.bj-gloss-item { font-size: 13.5px; color: var(--bj-chip-ink); }
.bj-gloss-item b { color: var(--bj-ink); }

/* ---- Single job page ---- */
.bj-crumbs { font-size: 13px; color: var(--bj-muted); margin: 16px auto 0; max-width: 1200px; padding: 0 15px; }
.bj-job {
    background: var(--bj-card); border: 1px solid var(--bj-line); border-radius: 12px;
    padding: 22px 24px; margin: 12px auto 20px; max-width: 1200px;
}
.bj-job h1 { font-size: 1.5rem; margin: 0 0 4px; line-height: 1.3; }
.bj-job-h3 { font-size: 1rem; margin: 20px 0 8px; }
.bj-job-body { font-size: 15px; line-height: 1.65; color: #374151; }
.bj-apply-row { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bj-line); }
.bj-apply-note { display: block; margin-top: 9px; font-size: 13px; color: var(--bj-muted); }
.bj-expired {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    border-radius: 10px; padding: 14px 16px; font-size: 14px; margin: 12px auto; max-width: 1200px;
}
.bj-back { margin: 18px auto; max-width: 1200px; padding: 0 15px; font-size: 14px; }

/* ---- Footer ---- */
.bj-foot {
    background: #10231f; color: #b9c9c5; text-align: center;
    padding: 26px 16px; font-size: 13.5px; line-height: 1.7;
}
.bj-foot a { color: #7fd1c4; }

@media (max-width: 640px) {
    .bj-hero h1 { font-size: 1.5rem; }
    .bj-card { flex-wrap: wrap; }
    .bj-apply { width: 100%; text-align: center; align-self: stretch; }
    .bj-count { width: 100%; margin: 4px 0 0; }
}