/*
 * Custom CSS for the Ashby job board.
 * Paste into Ashby admin → Theme → Custom CSS.
 * Applies to both the standalone jobs.ashbyhq.com/Runbook page
 * and the embed on myrunbook.com/jobs.
 */

/* Load Chivo (body) + Poppins (headings) — the same fonts the site uses. */
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* Zero out the default margin/padding on html and body so the job board
   sits flush against its container (matters for the standalone
   jobs.ashbyhq.com/Runbook page; the embed already has its own wrapper). */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

:root {
    /* Match the site's offwhite background (--offwhite in globals.css). */
    --colorAppBackground: #FBFAF9;

    /* Body / default font: Chivo. */
    --fontFamily: "Chivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Let the job board fill the parent container (the max-w-4xl wrapper on /jobs). */
    --widthMaxJobBoard: 100%;
}

/* Body text on job postings — explicit font-family so Ashby's bundled
   module CSS doesn't override the :root variable. */
.ashby-job-posting-brief,
.ashby-job-posting-brief-list,
.ashby-job-posting-brief-details,
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane {
    font-family: "Chivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Job-detail page panes default to white — repaint them in offwhite so
   they match the page background. !important is needed because Ashby's
   bundled stylesheet is fetched dynamically and loads AFTER this file,
   so equal-specificity rules from the bundle would otherwise win. */
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane-tab-slider,
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab,
.ashby-application-form-container,
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-uploader {
    background: #FBFAF9 !important;
}

/* The right pane's actual content sits inside a hashed module-class wrapper
   (e.g. `_tabContent_xxx`) that has its own white background. We can't name
   it directly, so blank out the background of every descendant CONTAINER
   inside the right pane and let the pane's offwhite show through.
   Limited to <div>/<section> so buttons, inputs, and other interactive
   elements keep their own backgrounds. */
.ashby-job-posting-right-pane div,
.ashby-job-posting-right-pane section {
    background-color: transparent !important;
}

/* Belt-and-suspenders: restore the submit button background in case the
   bundle puts it on a wrapping div. Uses Ashby's darker primary color
   (configurable in Ashby admin → Theme settings). */
.ashby-application-form-submit-button {
    background-color: var(--colorPrimary900) !important;
    color: #FBFAF9 !important;
}

/* Stack the two panes vertically (left info on top, content below) instead
   of side-by-side. We can't name the parent wrapper (the validator
   rejects :has() and ID selectors), so we just force each pane to take
   the full row. This relies on the parent being flex-wrap or a grid that
   honors grid-column overrides. */
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 0 100% !important;
    grid-column: 1 / -1 !important;
}

/* Lay the left-pane info items (Location / Employment Type / Location Type /
   Department) out horizontally across the row instead of stacked vertically. */
.ashby-job-posting-left-pane {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    align-items: flex-start !important;
}
.ashby-job-posting-left-pane > * {
    flex: 0 1 auto !important;
    border: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Headings use Poppins to match the site. */
.ashby-job-board-heading,
.ashby-department-heading,
.ashby-job-posting-brief-title,
.ashby-job-posting-heading {
    font-family: "Poppins", sans-serif;
}

/* Bump Ashby's default font sizes so they match the surrounding site
   (which uses text-lg / text-xl for body, text-4xl / text-5xl for h1). */
.ashby-job-posting-heading {
    font-size: 2.25rem !important;   /* ~36px, matches site h1 scale */
    font-weight: 400 !important;
    line-height: 1.2 !important;
}
.ashby-job-posting-brief-title {
    font-size: 1.25rem !important;   /* ~20px, matches site h3 scale */
}
.ashby-job-posting-brief-details {
    font-size: 1rem !important;      /* ~16px */
}
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-overview-tab p,
.ashby-job-posting-right-pane-overview-tab li,
.ashby-job-posting-left-pane {
    font-size: 1.125rem !important;  /* ~18px, matches site text-lg */
    line-height: 1.6 !important;
}

/* The heading sits inside a CSS-module wrapper with a hashed classname
   (e.g. `_titles_ud4nd_34`) that adds its own margin/padding. The hash
   changes between Ashby builds, so target the stable `_titles_` prefix. */
[class*="_titles_"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* Style the job board heading ("Open Positions") to match the
   job-posting page heading (.ashby-job-posting-heading — 2.25rem bold).
   The heading text itself is "Open Positions" — change in Ashby admin →
   Theme settings if you want different copy. */
.ashby-job-board-heading {
    font-family: "Poppins", sans-serif !important;
    font-size: 2.25rem !important;     /* matches job posting h1 */
    font-weight: 400 !important;
    color: #121212 !important;          /* --offblack */
    margin-bottom: 1.5rem !important;
    line-height: 1.2 !important;
}

/* Hide the "(1)" count next to the heading — the site originally just
   said "Open Roles" with no count. */
.ashby-job-board-heading-count {
    display: none !important;
}

/* Hide "Engineering" (and any other department grouping) heading. */
.ashby-department-heading {
    display: none;
}

/* Hide the "Powered by Ashby" link. The validator rejects :has(),
   so we can't collapse the surrounding <footer> wrapper as well —
   only the link itself is hidden. The remaining footer padding is
   small and inconspicuous. */
a[aria-label="Learn more about Ashby"] {
    display: none !important;
}

/* Strip the pill highlight that Ashby renders on hover/focus of the
   "All Jobs" back link — it overlaps the heading below. Also remove the
   left padding/margin so the arrow aligns with the page content.
   The button has a child wrapper div with its own background, so we
   blank out descendant backgrounds — but leave borders on descendants
   alone, since the back arrow icon is drawn with CSS borders. */
.ashby-job-board-back-to-all-jobs-button {
    margin-left: 0 !important;
    padding-left: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.ashby-job-board-back-to-all-jobs-button > div,
.ashby-job-board-back-to-all-jobs-button > span {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.ashby-job-board-back-to-all-jobs-button:hover,
.ashby-job-board-back-to-all-jobs-button:focus,
.ashby-job-board-back-to-all-jobs-button:focus-visible {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--colorPrimary900) !important;
}
.ashby-job-board-back-to-all-jobs-button:hover > div,
.ashby-job-board-back-to-all-jobs-button:hover > span,
.ashby-job-board-back-to-all-jobs-button:focus > div,
.ashby-job-board-back-to-all-jobs-button:focus > span,
.ashby-job-board-back-to-all-jobs-button:focus-visible > div,
.ashby-job-board-back-to-all-jobs-button:focus-visible > span {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* The back-arrow icon is an SVG inside the button; on hover Ashby flips
   its color to white to contrast with the dark pill (which we removed).
   Force the SVG to use the link's text color in all states so the arrow
   stays visible. */
.ashby-job-board-back-to-all-jobs-button svg,
.ashby-job-board-back-to-all-jobs-button:hover svg,
.ashby-job-board-back-to-all-jobs-button:focus svg,
.ashby-job-board-back-to-all-jobs-button:focus-visible svg {
    color: var(--colorPrimary600) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}