/* Ashby Theme - Clean White Version with Soft Fade Effects */

:root {
    --colorPrimary900: darkorange;
    --colorPrimary600: orange;
    --widthMaxJobBoard: 800px;
    --borderRadiusContainer: 10px;
    --borderRadiusControl: 10px;
    --borderRadiusButton: 10px;
    --fontFamily: "Whitney SSm", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", sans-serif;
    --colorAppBackground: #ffffff; /* White background */
    --colorCardBackground: #f9f9f9;
    --colorTextPrimary: #000000;
    --colorTextSecondary: #555555;
    --fadeShadow: rgba(0, 0, 0, 0.1);
}

/* General app background */
body {
    background: var(--colorAppBackground);
    color: var(--colorTextPrimary);
    font-family: var(--fontFamily);
    transition: background 0.5s ease, color 0.5s ease;
}

/* Cards and containers */
.ashby-application-form-container,
.ashby-job-posting-brief,
.ashby-job-posting-right-pane,
.ashby-application-form-section-container {
    background: var(--colorCardBackground);
    border-radius: var(--borderRadiusContainer);
    padding: 20px;
    position: relative;
    box-shadow: 0 0 40px var(--fadeShadow);
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.ashby-application-form-container:hover,
.ashby-job-posting-brief:hover {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Headings */
.ashby-job-board-heading,
.ashby-job-posting-heading {
    color: var(--colorPrimary900);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Buttons */
.ashby-application-form-submit-button {
    background: linear-gradient(135deg, var(--colorPrimary600), var(--colorPrimary900));
    color: white;
    border-radius: var(--borderRadiusButton);
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.ashby-application-form-submit-button:hover {
    background: linear-gradient(135deg, var(--colorPrimary900), var(--colorPrimary600));
    transform: scale(1.03);
}

/* Smooth fade at edges of content */
.ashby-job-posting-left-pane::before,
.ashby-job-posting-right-pane::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
    border-radius: inherit;
}

.ashby-job-posting-left-pane::after,
.ashby-job-posting-right-pane::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    border-radius: inherit;
}