/* ============================================================
   Thinkific brand stylesheet for the Ashby job board
   Goal: make the Ashby widget blend into the careers page
   Source of truth: https://www.thinkific.com/careers/
   Where to paste: Ashby Admin -> Settings -> Theme -> Custom CSS
   ------------------------------------------------------------
   Brand values pulled from the live careers page:
     Page background ...... #F3F1EC  (warm cream)
     Text / links ......... #271526  (plum)
     Primary CTA fill ..... #FCCC18  (yellow)  + #271526 text
     Body font ............ Instrument Sans
     Display font ......... PP Writer  (proprietary; serif fallback)
     Buttons .............. fully rounded (pill)
   ============================================================ */

/* Loads the body font on the *standalone* hosted board
   (jobs.ashbyhq.com/...). On the careers page itself these fonts
   already load, so this line is just a safety net. Remove if your
   Ashby plan blocks @import. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
    /* ----------------------------------------------------------
       PRIORITY 1 — BACKGROUND
       Ashby's default is #f7f8fa (a cool near-white) which reads
       as a grey/white card sitting on our cream page. This matches
       the careers page cream so the board disappears into the page.
       (Prefer it to be see-through on the embedded page? Use
        `transparent` instead — but #F3F1EC also looks correct on
        the standalone hosted board.)
       ---------------------------------------------------------- */
    --colorAppBackground: #F3F1EC;

    /* ----------------------------------------------------------
       BRAND ACCENT / LINKS / PRIMARY CONTROLS
       Drives link color, filters, and active states.
       NOTE: these two are ALSO editable in Ashby Admin -> Theme
       settings. If you set the brand color there, delete these two
       lines so the two places don't fight each other.
       Plum is used for links/text; the yellow is reserved for the
       main CTA button (styled near the bottom of this file).
       ---------------------------------------------------------- */
    --colorPrimary900: #271526; /* darker plum */
    --colorPrimary600: #3F2A3C; /* lighter plum (hover/secondary) */

    /* ----------------------------------------------------------
       SHAPE — Thinkific buttons are fully rounded (pill);
       containers/inputs get a soft radius.
       ---------------------------------------------------------- */
    --borderRadiusButton: 9999px;
    --borderRadiusControl: 8px;
    --borderRadiusContainer: 12px;

    /* ----------------------------------------------------------
       TYPE — body copy in Instrument Sans
       ---------------------------------------------------------- */
    --fontFamily: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
}

/* Headings use the careers-page display serif when it is available
   (it is on the embedded page); otherwise they fall back to a serif
   so they never render in an off-brand font. */
.ashby-job-board-heading,
.ashby-job-posting-heading,
.ashby-job-posting-brief-title,
.ashby-department-heading {
    font-family: "PP Writer", Georgia, "Times New Roman", serif;
    color: #271526;
}

/* Keep secondary text and counts in brand plum. */
.ashby-job-board-heading-count,
.ashby-job-posting-brief-details,
.ashby-department-heading-level {
    color: #271526;
}

/* Primary CTA = Thinkific yellow with plum text, pill shape. */
.ashby-application-form-submit-button {
    background-color: #FCCC18;
    color: #271526;
    border: 1px solid transparent;
    border-radius: 9999px;
}

.ashby-application-form-submit-button:hover {
    background-color: #ECBE0E; /* slightly deeper yellow on hover */
    color: #271526;
}