/* =============================================================
   TaskRay — Ashby Careers Page Styling
   Version 1  ·  Brand colors + clean web font + light polish
   -------------------------------------------------------------
   HOW TO USE: paste this whole file into Ashby's custom CSS box
   (Admin → Job Board / Theme settings → Custom CSS).
   Each section is labeled so you can find or remove pieces easily.
   ============================================================= */


/* -------------------------------------------------------------
   1. WEB FONT
   A clean, professional font close to TaskRay's look. It's free,
   so there's nothing to license. (This @import line must stay at
   the very top of the file.)
   To make it more geometric/closer to the logo, swap "Inter" for
   "Figtree" or "Plus Jakarta Sans" in BOTH the line below and the
   --fontFamily line in section 2.
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* -------------------------------------------------------------
   2. BRAND VARIABLES
   These drive colors and shapes across the whole page.
   NOTE: the two primary colors can ALSO be set in Ashby's admin
   under Theme Settings without any code. If you set them there,
   you can delete the two --colorPrimary lines below.
   ------------------------------------------------------------- */
:root {
    --colorPrimary900: #003E51;   /* TaskRay navy (pulled from your logo) */
    --colorPrimary600: #1A6B85;   /* a lighter navy for secondary/hover use */

    --colorAppBackground: #F5F7F8; /* soft neutral so white cards stand out */

    --fontFamily: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
                  "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

    --widthMaxJobBoard: 820px;
    --borderRadiusContainer: 12px;
    --borderRadiusControl: 10px;
    --borderRadiusButton: 10px;
}


/* -------------------------------------------------------------
   3. "OPEN POSITIONS" HEADING  ·  minimal + on-brand
   Ashby requires this heading and it can't be removed, so we keep
   it small and tidy: navy text, a muted count, and a thin divider
   line underneath — no heavy slab.
   ------------------------------------------------------------- */
.ashby-job-board-heading {
    color: var(--colorPrimary900);
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0 0 12px;
    margin: 10px 0 20px;
    border-bottom: 1px solid #E4E8EC;   /* subtle divider; delete this line for no rule */
}

.ashby-job-board-heading-count {
    color: #8A9BA3;   /* muted gray so the "(1)" doesn't shout */
    font-weight: 500;
}


/* -------------------------------------------------------------
   4. DEPARTMENT & SECTION HEADINGS
   ------------------------------------------------------------- */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
    color: var(--colorPrimary900);
    font-weight: 700;
    letter-spacing: 0.2px;
}


/* -------------------------------------------------------------
   5. JOB CARDS  ·  light polish on each posting row
   Subtle border + lift on hover so roles feel clickable.
   ------------------------------------------------------------- */
.ashby-job-posting-brief {
    background-color: #FFFFFF;
    border: 1px solid #E4E8EC;
    border-radius: var(--borderRadiusContainer);
    padding: 18px 20px;
    margin-bottom: 12px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ashby-job-posting-brief:hover {
    border-color: #C7D2D8;
    box-shadow: 0 4px 14px rgba(0, 62, 81, 0.08);
    transform: translateY(-1px);
}

.ashby-job-posting-brief-title {
    color: var(--colorPrimary900);
    font-weight: 600;
}


/* -------------------------------------------------------------
   6. BUTTONS
   Primary navy with a deeper navy on hover.
   ------------------------------------------------------------- */
.ashby-application-form-submit-button {
    background-color: var(--colorPrimary900);
    border-radius: var(--borderRadiusButton);
    font-weight: 600;
}

.ashby-application-form-submit-button:hover {
    background-color: #002A38;   /* deeper navy on hover */
}

.ashby-job-board-back-to-all-jobs-button {
    color: var(--colorPrimary900);
    font-weight: 500;
}


/* -------------------------------------------------------------
   7. FILTERS  ·  (not visible yet with one role, but ready for
   when you post more — keeps inputs on-brand and rounded)
   ------------------------------------------------------------- */
.ashby-job-board-filter {
    border-radius: var(--borderRadiusControl);
    border: 1px solid #E4E8EC;
}

.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
    color: var(--colorPrimary900);
}


/* -------------------------------------------------------------
   8. NAVY ACCENT BANDS  ·  brand navy, top and bottom
   - Top: a slim solid stripe above the logo.
   - Bottom: a thicker footer banner that closes off the page.
   Knobs: height/padding for thickness, the bottom "content" line
   for the message (set it to "" for a plain band). Delete this
   whole section to remove both.
   ------------------------------------------------------------- */
body::before {
    content: "";
    display: block;
    width: 100%;
    height: 36px;                      /* top stripe thickness (between 10 and 64) */
    background-color: var(--colorPrimary900);
    margin-bottom: 28px;               /* space between the stripe and the logo */
}

body::after {
    content: "Build what's next with us.";  /* edit this line, or set to "" for a plain band */
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--colorPrimary900);
    color: #FFFFFF;
    text-align: center;
    font-weight: 600;
    padding: 22px 24px;                /* increase to make the bottom band thicker */
    margin-top: 32px;                  /* space above the bottom band */
}