/* stylelint-disable */

/* --- Ledger Branding Variables --- */
:root {
    /* Darker primary color (Ledger Black/Main Background Text)
    Used for primary text, main headings, and dark backgrounds. */
    --colorPrimary900: #000000;

    /* Lighter primary color (Ledger Accent Blue/CTA Color)
    Used for buttons, links, and highlights. */
    --colorPrimary600: #0060FE;

    /* The max width of the job board container - adjusted for a typical modern layout */
    --widthMaxJobBoard: 1200px; 

    /* Container border radius - small rounding is common */
    --borderRadiusContainer: 8px; 

    /* Border radius of control elements (e.g. input boxes) */
    --borderRadiusControl: 4px;

    /* Button border radius */
    --borderRadiusButton: 4px;

    /* Font families - Prioritizing Inter with system fallbacks */
    --fontFamily: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Background color - Crisp white for content background */
    --colorAppBackground: #ffffff; 

    /* New variables for better branding control */
    --colorTextDefault: #000000; /* Black */
    --colorTextInverse: #ffffff; /* White */
    --colorBorderDefault: #e5e5e5; /* Light Gray Border */
    --colorPlaceholder: #999999; /* Medium Gray for placehoder text */
    --colorError: #d93025; /* Red for errors/alerts */
}

/* --- Global Job Board Styles --- */

/* Apply font and background to the whole job board container.
   The main container should be centered and have a max-width. */
@media all {
    .ashby-job-board-container {
        font-family: var(--fontFamily);
        background-color: var(--colorAppBackground);
        color: var(--colorTextDefault);
        max-width: var(--widthMaxJobBoard);
        margin: 0 auto;
        padding: 0 20px; /* Add some horizontal padding to the main content */
    }
}

/* --- Banner Styling --- */

/* To achieve the full-width black background for the banner, we might need to target
   a parent element of the banner (if Ashby wraps it). Since we only have access to
   specific classes, we'll assume the banner image is contained within something
   like ashby-job-board-heading or a custom element.
   If the banner image is directly loaded by Ashby, we might need to rely on the
   Ashby theme settings for the banner background if a suitable parent element isn't available.

   However, if the banner is part of the job board container, we can add a specific
   black background to a section containing the main heading. Let's create a hypothetical
   wrapper for the banner to achieve the effect based on your image.

   Ashby doesn't give a direct class for the "banner background" itself.
   We will style