/* ============================================================
   Attention Engineering — Ashby Job Board Custom CSS
   Dark charcoal background, white text, muted gray accents
   (matches company logo / brand colors)
   Built on: ashbyhq.com/job_board_example_css/full-job-board.css
   ============================================================ */

:root {
    /* Brand palette */
    --ae-background: #17181c;      /* charcoal from logo background */
    --ae-surface: #1f2126;        /* cards / panels, one step lighter */
    --ae-surface-hover: #26282e;
    --ae-border: #2e3138;
    --ae-text: #ffffff;           /* primary text — white like the wordmark */
    --ae-text-secondary: #b6b9c0; /* secondary text */
    --ae-muted: #8f9298;          /* the gray of the waveform marks */

    /* Ashby theme variables.
       WARNING — primary colors can also be set in Ashby admin theme
       settings; keep those in sync with these values. */
    --colorPrimary900: #d7d9dd;   /* darker primary (hover states) */
    --colorPrimary600: #ffffff;   /* lighter primary (links, accents) */

    --widthMaxJobBoard: 800px;

    --borderRadiusContainer: 12px;
    --borderRadiusControl: 10px;
    --borderRadiusButton: 10px;

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

    --colorAppBackground: var(--ae-background);
}

/* ---------- Page base ---------- */

html,
body {
    background-color: var(--ae-background);
    color: var(--ae-text);
    font-family: var(--fontFamily);
    /* Prevent a sideways scrollbar from the full-bleed header bar. */
    overflow-x: hidden;
}

a {
    color: var(--ae-text);
}

a:hover {
    color: var(--colorPrimary900);
}

/* ---------- Job board (listing page) ---------- */

/* The heading of the entire job board. */
.ashby-job-board-heading {
    color: var(--ae-text);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* The count of job postings on the job board. */
.ashby-job-board-heading-count {
    color: var(--ae-muted);
}

/* Department + team headings that group postings. */
.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
    color: var(--ae-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
    font-weight: 600;
}

/* The container for the list of job post briefings. */
.ashby-job-posting-brief-list {
    background: transparent;
}

/* A single job posting card. */
.ashby-job-posting-brief {
    margin-bottom: 10px;
    background-color: var(--ae-surface);
    border: 1px solid var(--ae-border);
    border-radius: var(--borderRadiusContainer);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ashby-job-posting-brief:hover {
    background-color: var(--ae-surface-hover);
    border-color: var(--ae-muted);
}

/* The title of the job posting in the details pane. */
.ashby-job-posting-brief-title {
    color: var(--ae-text);
    font-weight: 600;
}

/* The job posting details (location, type, compensation). */
.ashby-job-posting-brief-details {
    color: var(--ae-text-secondary);
}

/* ---------- Filters ---------- */

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

/* A select box element for filtering the job board. */
.ashby-job-board-filter {
    background-color: var(--ae-surface);
    color: var(--ae-text);
    border: 1px solid var(--ae-border);
    border-radius: var(--borderRadiusControl);
}

/* ---------- Job posting (detail page) ---------- */

/* The main header on the job posting page — solid full-width bar
   (like a proper top nav) instead of floating elements. */
.ashby-job-posting-header {
    background-color: var(--ae-background);
    color: var(--ae-text);
    border-bottom: none;
    padding: 16px 24px;
    border-radius: 0;
    box-sizing: border-box;
    /* Full-bleed: stretch the bar across the whole viewport even though
       it lives inside the centered content column. */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

/* The heading of a job post. */
.ashby-job-posting-heading {
    color: var(--ae-text);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Back-navigation button to the full listing. */
.ashby-job-board-back-to-all-jobs-button {
    color: var(--ae-text-secondary);
}

.ashby-job-board-back-to-all-jobs-button:hover {
    color: var(--ae-text);
}

/* Left pane: job details sidebar. */
.ashby-job-posting-left-pane {
    background-color: var(--ae-surface);
    border: 1px solid var(--ae-border);
    border-radius: var(--borderRadiusContainer);
    color: var(--ae-text-secondary);
}

/* Right pane: overview / application tabs.
   Ashby gives the content panel a white background by default — force it
   (and any nested wrapper divs) onto the dark surface so white body text
   stays readable. */
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane div {
    background-color: var(--ae-surface);
    color: var(--ae-text);
}

.ashby-job-posting-right-pane {
    border: 1px solid var(--ae-border);
    border-radius: var(--borderRadiusContainer);
    overflow: hidden;
}

/* Job description content inside the overview tab. */
.ashby-job-posting-right-pane h1,
.ashby-job-posting-right-pane h2,
.ashby-job-posting-right-pane h3,
.ashby-job-posting-right-pane h4,
.ashby-job-posting-right-pane strong {
    color: var(--ae-text);
}

.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li,
.ashby-job-posting-right-pane span {
    color: var(--ae-text-secondary);
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
    color: var(--ae-text-secondary);
}

.ashby-job-posting-right-pane-tab-slider {
    background-color: var(--ae-text);
}

/* 'Apply for this Job' button at the bottom of the overview tab.
   Ashby paints it with the primary color (white for us) and white text,
   which makes it invisible — force charcoal text on the white fill. */
.ashby-job-posting-right-pane button,
.ashby-job-posting-right-pane a[class*="button"] {
    background-color: var(--ae-text);
    color: var(--ae-background) !important;
    border: none;
    border-radius: var(--borderRadiusButton);
    font-weight: 600;
    transition: background-color 0.15s ease;
}

.ashby-job-posting-right-pane button:hover,
.ashby-job-posting-right-pane a[class*="button"]:hover {
    background-color: var(--colorPrimary900);
    color: var(--ae-background) !important;
}

/* ---------- Application form ---------- */

.ashby-application-form-container {
    background-color: var(--ae-surface);
    border: 1px solid var(--ae-border);
    border-radius: var(--borderRadiusContainer);
    color: var(--ae-text);
}

.ashby-application-form-section-header-title {
    color: var(--ae-text);
    font-weight: 600;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
    color: var(--ae-text-secondary);
}

.ashby-application-form-question-title {
    color: var(--ae-text);
    font-weight: 500;
}

/* Inputs inside the application form. */
.ashby-application-form-container input,
.ashby-application-form-container textarea,
.ashby-application-form-container select {
    background-color: var(--ae-background);
    color: var(--ae-text);
    border: 1px solid var(--ae-border);
    border-radius: var(--borderRadiusControl);
}

.ashby-application-form-container input::placeholder,
.ashby-application-form-container textarea::placeholder {
    color: var(--ae-muted);
}

.ashby-application-form-container input:focus,
.ashby-application-form-container textarea:focus,
.ashby-application-form-container select:focus {
    border-color: var(--ae-text);
    outline: none;
}

/* Resume autofill drop zone. */
.ashby-application-form-autofill-input-root {
    background-color: var(--ae-background);
    border: 1px dashed var(--ae-muted);
    border-radius: var(--borderRadiusControl);
}

.ashby-application-form-autofill-input-title {
    color: var(--ae-text);
}

.ashby-application-form-autofill-input-description {
    color: var(--ae-text-secondary);
}

.ashby-application-form-autofill-input-icon {
    color: var(--ae-muted);
}

/* Submit button — white on charcoal, inverted like the wordmark. */
.ashby-application-form-submit-button {
    background-color: var(--ae-text);
    color: var(--ae-background);
    border: none;
    border-radius: var(--borderRadiusButton);
    font-weight: 600;
    transition: background-color 0.15s ease;
}

.ashby-application-form-submit-button:hover {
    background-color: var(--colorPrimary900);
    color: var(--ae-background);
}

/* Success / failure messages. */
.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
    background-color: var(--ae-surface);
    border: 1px solid var(--ae-border);
    border-radius: var(--borderRadiusContainer);
    color: var(--ae-text);
}

/* Surveys, if any. */
.ashby-survey-form-container {
    background-color: var(--ae-surface);
    border: 1px solid var(--ae-border);
    border-radius: var(--borderRadiusContainer);
    color: var(--ae-text);
}