/* stylelint-disable */

/*
  MagicSchool.ai — Ashby Job Board Custom CSS
  ─────────────────────────────────────────────
  Brand Colors:
    Purple   #762BFA  (primary CTA / accent)
    Indigo   #33116F  (darker primary / hover states)
    Amethyst #A273F4  (lighter accent)
    Lilac    #D8C1FF  (subtle tint / borders)
    Black    #1B1B1B  (body text)
    Gray     #F0F0F0  (app background)
    Cream    #FFFCDC  (warm surface alternative)
    White    #FFFFFF

  Fonts:
    Headings → Jokker Semibold (self-hosted / loaded by your site)
    Body     → Figtree Regular (Google Fonts)
*/

/* ─── Google Fonts: Figtree ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

/* ─── CSS Variables ─────────────────────────────────────────────────────── */
:root {
    /* Primary colors
       WARNING — These can also be set in the Ashby admin under theme settings.
       Make sure your colors are in sync with those settings. */
    --colorPrimary900: #33116F;   /* Indigo — used for hover/active states    */
    --colorPrimary600: #762BFA;   /* Purple — main CTA and accent color        */

    /* Supporting palette */
    --colorAmethyst:   #A273F4;   /* Lighter purple accent                     */
    --colorLilac:      #D8C1FF;   /* Very light purple — borders, subtle fills */
    --colorBlack:      #1B1B1B;   /* Primary text                              */
    --colorGray:       #F0F0F0;   /* App background                            */
    --colorCream:      #FFFCDC;   /* Warm surface alternative                  */

    /* Max width of the job board container */
    --widthMaxJobBoard: 800px;

    /* Border radii */
    --borderRadiusContainer: 12px;
    --borderRadiusControl:   8px;
    --borderRadiusButton:    8px;

    /* Font families */
    --fontFamily:        "Figtree", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", sans-serif;
    --fontFamilyHeading: "Jokker", "Figtree", "Segoe UI", sans-serif;

    /* App background — transparent, inherits from the page */
    --colorAppBackground: transparent;
}


/* ─── Typography: Headings (Jokker Semibold) ────────────────────────────── */

.ashby-job-board-heading,
.ashby-job-posting-heading,
.ashby-job-posting-brief-title,
.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level,
.ashby-application-form-section-header-title {
    font-family: var(--fontFamilyHeading);
    font-weight: 600;
    color: var(--colorPrimary900);
}

/* ─── Typography: Body Copy (Figtree Regular) ───────────────────────────── */

.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label,
.ashby-job-board-heading-count,
.ashby-application-form-question-title,
.ashby-application-form-question-description,
.ashby-application-form-section-header-description,
.ashby-application-form-texting-consent-description,
.ashby-job-posting-brief-details {
    font-family: var(--fontFamily);
}


/* ─── Job Board ─────────────────────────────────────────────────────────── */

/* Page heading */
.ashby-job-board-heading {
    color: var(--colorPrimary900);
}

/* Job count next to heading — main purple */
.ashby-job-board-heading-count {
    color: var(--colorPrimary600);
    font-weight: 500;
}

/* Filter dropdowns */
.ashby-job-board-filter {
    font-family: var(--fontFamily);
    border-color: var(--colorLilac);
    color: var(--colorPrimary900);
    background-color: #FFFFFF;
}

.ashby-job-board-filter:focus {
    border-color: var(--colorPrimary600);
    outline-color: var(--colorPrimary600);
    box-shadow: 0 0 0 3px rgba(118, 43, 250, 0.15);
}

/* "Filters" label */
.ashby-job-board-filters-label {
    color: var(--colorPrimary900);
    font-weight: 500;
}

/* "Reset filters" link */
.ashby-job-board-reset-filters-label {
    color: var(--colorPrimary600);
    font-weight: 500;
    cursor: pointer;
}

.ashby-job-board-reset-filters-label:hover {
    color: var(--colorPrimary900);
    text-decoration: underline;
}


/* ─── Job Posting Cards ─────────────────────────────────────────────────── */

/* Force all text inside a card to Indigo — excludes buttons AND their children
   so Ashby handles button colors naturally */
.ashby-job-posting-brief *:not(button):not([role="button"]):not(a):not(button *):not([role="button"] *) {
    color: var(--colorPrimary900) !important;
}

.ashby-job-posting-brief {
    margin-bottom: 10px;
    border-top: 0.5px solid #C6A7FB !important;
    border-right: 0.5px solid #C6A7FB !important;
    border-bottom: 0.5px solid #C6A7FB !important;
    border-left: 0.5px solid #C6A7FB !important;
    transition: box-shadow 0.15s ease;
}

.ashby-job-posting-brief:hover,
.ashby-job-posting-brief:focus-within {
    border-top: 0.5px solid #C6A7FB !important;
    border-right: 0.5px solid #C6A7FB !important;
    border-bottom: 0.5px solid #C6A7FB !important;
    border-left: 0.5px solid #C6A7FB !important;
    box-shadow: 0 0 20px 0 #A273F4;
    background-color: transparent;
}

/* Card title — Figtree SemiBold 18px */
.ashby-job-posting-brief-title {
    font-family: var(--fontFamily);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--colorPrimary900);
    transition: color 0.15s ease;
    margin-bottom: 24px;
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-title,
.ashby-job-posting-brief:focus-within .ashby-job-posting-brief-title {
    color: var(--colorPrimary600);
}

/* Department eyebrow and location/type details — Jokker Semibold 12px all caps */
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level,
.ashby-job-posting-brief-details {
    font-family: var(--fontFamilyHeading) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--colorPrimary900) !important;
}

/* ─── Job Posting Detail Page ───────────────────────────────────────────── */

/* Broad color inheritance — force ALL text in the detail view to Indigo,
   excludes buttons AND their children so Ashby handles button colors naturally.
   :not(button *) / :not([role="button"] *) are CSS Selectors Level 4 and work
   in all modern browsers used by Ashby. */
.ashby-job-posting-left-pane *:not(button):not([role="button"]):not(a):not(button *):not([role="button"] *),
.ashby-job-posting-right-pane *:not(button):not([role="button"]):not(a):not(button *):not([role="button"] *),
.ashby-job-posting-right-pane-overview-tab *:not(button):not([role="button"]):not(a):not(button *):not([role="button"] *),
.ashby-job-posting-right-pane-application-tab *:not(button):not([role="button"]):not(a):not(button *):not([role="button"] *) {
    color: var(--colorPrimary900) !important;
}

.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab,
.ashby-application-form-container,
.ashby-survey-form-container {
    color: var(--colorPrimary900);
    font-family: var(--fontFamily);
}

/* Detail view left pane — divider lines between metadata rows */
.ashby-job-posting-left-pane hr,
.ashby-job-posting-left-pane [class*="divider"],
.ashby-job-posting-left-pane [class*="separator"],
.ashby-job-posting-left-pane [class*="Divider"],
.ashby-job-posting-left-pane [class*="Separator"] {
    border-color: #C6A7FB !important;
    border-top-width: 0.5px !important;
    border-top-style: solid !important;
    border-bottom: none !important;
}

/* Detail view left pane — labels are h2 elements (_heading_ class) */
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane [class*="_heading_"] {
    font-family: var(--fontFamily) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--colorPrimary900) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Detail view left pane — ALL values (p, span, li, ul, a) match ENGINEERING style:
   Jokker Semibold, 12px, 140% line-height, 12% letter-spacing, all caps, Indigo */
.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane span,
.ashby-job-posting-left-pane li,
.ashby-job-posting-left-pane ul,
.ashby-job-posting-left-pane [class*="compensationTier"],
.ashby-job-posting-left-pane [class*="Compensation"],
.ashby-job-posting-left-pane [class*="compensation"] {
    font-family: var(--fontFamilyHeading) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--colorPrimary900) !important;
    list-style: none !important;
}

/* Detail view left pane — section dividers (_section_ class divs) */
.ashby-job-posting-left-pane [class*="_section_"] {
    border-bottom: 0.5px solid #C6A7FB !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

/* Main page header */
.ashby-job-posting-header {
    background-color: #FFFFFF;
}

/* Job title */
.ashby-job-posting-heading {
    color: var(--colorPrimary900);
}

/* Department / team headings on listing page */
.ashby-department-heading,
.ashby-department-heading-level {
    color: var(--colorPrimary900) !important;
    border-bottom: none;
    padding-bottom: 0;
}

/* "Back to all jobs" button — Link style (no background, no border, pure text link) */
.ashby-job-board-back-to-all-jobs-button {
    font-family: var(--fontFamilyHeading) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--colorPrimary600) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: color 0.15s ease !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:active {
    color: var(--colorPrimary900) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: underline !important;
}

.ashby-job-board-back-to-all-jobs-button:focus-visible {
    outline: none !important;
    color: var(--colorPrimary900) !important;
    background: transparent !important;
    text-decoration: underline !important;
}


/* ─── Application Form ──────────────────────────────────────────────────── */

/* Form container */
.ashby-application-form-container {
    font-family: var(--fontFamily);
}

/* Section container */
.ashby-application-form-section-container {
    border-color: var(--colorLilac);
}

/* Section header title */
.ashby-application-form-section-header-title {
    color: var(--colorPrimary900);
}

/* Section header description */
.ashby-application-form-section-header-description {
    color: var(--colorPrimary900);
}

/* Question title */
.ashby-application-form-question-title {
    font-family: var(--fontFamilyHeading);
    font-weight: 600;
    color: var(--colorPrimary900);
}

/* Question description */
.ashby-application-form-question-description {
    color: var(--colorPrimary900);
    font-size: 0.875rem;
}

/* Field entry wrapper */
.ashby-application-form-field-entry {
    font-family: var(--fontFamily);
}

/* Submit button — Primary Large style */
/* Submit button — Ashby handles background/states, we only fix font and
   protect text color from the broad Indigo rule above */
.ashby-application-form-submit-button {
    font-family: var(--fontFamilyHeading);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    padding: 16px 24px;
    cursor: pointer;
}

.ashby-application-form-submit-button,
.ashby-application-form-submit-button * {
    color: #FFFFFF !important;
}

/* Success state */
.ashby-application-form-success-container {
    font-family: var(--fontFamily);
    color: var(--colorPrimary900);
}

/* Failure state */
.ashby-application-form-failure-container {
    font-family: var(--fontFamily);
}

/* Blocked application message */
.ashby-application-form-blocked-application-container {
    font-family: var(--fontFamily);
}

/* Text messaging consent */
.ashby-application-form-texting-consent-description {
    color: var(--colorPrimary900);
    font-size: 0.8125rem;
}


/* ─── Autofill (AI resume parsing) ─────────────────────────────────────── */

.ashby-application-form-autofill-input-base-layer {}
.ashby-application-form-autofill-input-description {}
.ashby-application-form-autofill-input-drag-layer {}
.ashby-application-form-autofill-input-form-alert {}

/* Autofill uploader — Ashby handles everything */
.ashby-application-form-autofill-uploader {}

/* All buttons inside the application form — let button children inherit
   color from the button itself (Ashby controls the button's own color),
   so text stays visible regardless of hover/active state.
   NOTE: the broad *:not(button *) fix above makes this mostly redundant,
   but it's kept as a belt-and-suspenders fallback. */
.ashby-application-form-container button *,
.ashby-application-form-container [role="button"] * {
    color: inherit !important;
}

/* Submit button children should always be white */
.ashby-application-form-submit-button,
.ashby-application-form-submit-button * {
    color: #FFFFFF !important;
}

/* Upload / outlined button hover fix — when Ashby applies a dark hover
   background these buttons need white text to stay legible */
.ashby-application-form-container button:hover,
.ashby-application-form-container button:hover *,
.ashby-application-form-container [role="button"]:hover,
.ashby-application-form-container [role="button"]:hover * {
    color: #FFFFFF !important;
}

/* Sparkle icon — tint to MagicSchool purple */
.ashby-application-form-autofill-input-icon {
    color: var(--colorPrimary600);
}

/* Pending state overlay */
/* .ashby-application-form-autofill-input-pending-layer {} */

.ashby-application-form-autofill-input-root {}
.ashby-application-form-autofill-input-title {
    font-family: var(--fontFamilyHeading);
    font-weight: 600;
}

.ashby-application-form-autofill-pane {}
.ashby-application-form-autofill-uploader {}


/* ─── Survey ─────────────────────────────────────────────────────────────── */

.ashby-survey-form-container {
    font-family: var(--fontFamily);
}


/* ─── Job Posting Panes ─────────────────────────────────────────────────── */

.ashby-job-posting-left-pane {}
.ashby-job-posting-right-pane {}

/* Tab slider — highlight active tab in MagicSchool purple */
.ashby-job-posting-right-pane-tab-slider {
    background-color: var(--colorPrimary600);
}

.ashby-job-posting-right-pane-overview-tab {}
.ashby-job-posting-right-pane-application-tab {}

/* Brief list container */
.ashby-job-posting-brief-list {}
.ashby-job-posting-brief-details {}