/* stylelint-disable */
/* Plinth Job Board — clean, on-brand styling for Ashby */

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

/* ==========================================
   CSS VARIABLES — PLINTH BRAND
   ========================================== */
:root {
    /* Plinth purple (matches Ashby theme colour #483fad) */
    --colorPrimary900: #2d2685;
    --colorPrimary700: #3a32a0;
    --colorPrimary600: #483fad;   /* Primary */
    --colorPrimary500: #5e55c0;
    --colorPrimary100: #eeecfa;   /* Tint backgrounds */
    --colorPrimary50:  #f6f5fd;

    /* Neutrals */
    --colorNeutral900: #0f172a;
    --colorNeutral700: #334155;
    --colorNeutral500: #64748b;
    --colorNeutral300: #e2e8f0;
    --colorNeutral200: #edf0f5;
    --colorNeutral100: #f5f7fa;
    --colorNeutral50:  #fafbfc;

    /* Semantic */
    --colorSuccess: #16a34a;
    --colorError:   #dc2626;

    /* Background */
    --colorAppBackground: #ffffff;
    --colorCardBackground: #ffffff;

    /* Layout */
    --widthMaxJobBoard: 1100px;
    --widthMaxApplicationForm: 760px;

    /* Radii */
    --borderRadiusContainer: 12px;
    --borderRadiusControl: 8px;
    --borderRadiusButton: 8px;
    --borderRadiusCard: 12px;

    /* Typography — one family, modern sans */
    --fontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fontFamilyHeading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fontSizeBase: 16px;
    --lineHeightBase: 1.6;

    /* Shadows — subtle only */
    --shadowSm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadowMd: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadowLg: 0 4px 12px rgba(15, 23, 42, 0.06);

    /* Transitions */
    --transitionFast: 120ms ease;
    --transitionBase: 180ms ease;
}

/* ==========================================
   BASE
   ========================================== */
* { box-sizing: border-box; }

body {
    font-family: var(--fontFamily);
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightBase);
    color: var(--colorNeutral900);
    background: var(--colorAppBackground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   JOB BOARD HEADING & FILTERS
   ========================================== */
.ashby-job-board-heading {
    font-family: var(--fontFamilyHeading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--colorNeutral900);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.ashby-job-board-heading-count {
    font-size: 1rem;
    font-weight: 500;
    color: var(--colorNeutral500);
    margin-left: 8px;
}

.ashby-job-board-filters-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--colorNeutral500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.ashby-job-board-filter {
    padding: 8px 14px;
    border: 1px solid var(--colorNeutral300);
    border-radius: var(--borderRadiusControl);
    background: white;
    color: var(--colorNeutral900);
    font-size: 0.9375rem;
    font-family: var(--fontFamily);
    transition: border-color var(--transitionBase), box-shadow var(--transitionBase);
    cursor: pointer;
}

.ashby-job-board-filter:hover {
    border-color: var(--colorPrimary600);
}

.ashby-job-board-filter:focus {
    outline: none;
    border-color: var(--colorPrimary600);
    box-shadow: 0 0 0 3px var(--colorPrimary100);
}

.ashby-job-board-reset-filters-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--colorPrimary600);
    cursor: pointer;
    transition: color var(--transitionFast);
}

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

/* ==========================================
   BACK BUTTON
   ========================================== */
.ashby-job-board-back-to-all-jobs-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--colorPrimary600);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: var(--fontFamily);
    cursor: pointer;
    transition: color var(--transitionBase);
    border-radius: var(--borderRadiusButton);
}

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

/* ==========================================
   JOB POSTING LIST
   ========================================== */
.ashby-job-posting-brief-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

/* Hide Ashby's built-in dividers that overlap card top borders */
.ashby-job-posting-brief-list hr,
.ashby-job-posting-brief-list > div > hr,
.ashby-job-posting-brief + hr,
hr + .ashby-job-posting-brief::before {
    display: none !important;
}

.ashby-job-posting-brief {
    background: var(--colorCardBackground);
    border-radius: var(--borderRadiusCard);
    padding: 20px 24px;
    border: 1px solid var(--colorNeutral200) !important;
    transition: border-color var(--transitionBase), box-shadow var(--transitionBase);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.ashby-job-posting-brief:hover {
    border-color: var(--colorPrimary600) !important;
    box-shadow: var(--shadowMd);
}

.ashby-job-posting-brief-title {
    font-family: var(--fontFamilyHeading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--colorNeutral900);
    margin-bottom: 8px;
    line-height: 1.35;
    transition: color var(--transitionBase);
}

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

.ashby-job-posting-brief-details {
    font-size: 0.875rem;
    color: var(--colorNeutral500);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--colorPrimary600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.ashby-department-heading,
.ashby-department-heading-level {
    font-family: var(--fontFamilyHeading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--colorNeutral900);
    margin: 32px 0 16px;
}

/* Hide horizontal dividers that follow department headings */
.ashby-department-heading + hr,
.ashby-department-heading-level + hr,
.ashby-department-heading ~ hr:first-of-type,
.ashby-department-heading-level ~ hr:first-of-type {
    display: none !important;
}

/* ==========================================
   JOB POSTING DETAIL
   ========================================== */
.ashby-job-posting-header {
    background: var(--colorPrimary50);
    padding: 32px;
    border-radius: var(--borderRadiusContainer);
    margin-bottom: 24px;
    border: 1px solid var(--colorPrimary100);
}

.ashby-job-posting-heading {
    font-family: var(--fontFamilyHeading);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--colorNeutral900);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.ashby-job-posting-left-pane {
    background: var(--colorCardBackground);
    padding: 8px 0;
    line-height: 1.7;
    color: var(--colorNeutral700);
}

.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3,
.ashby-job-posting-left-pane h4 {
    font-family: var(--fontFamilyHeading);
    color: var(--colorNeutral900);
    margin-top: 28px;
    margin-bottom: 12px;
}

.ashby-job-posting-left-pane h2 { font-size: 1.375rem; font-weight: 600; }
.ashby-job-posting-left-pane h3 { font-size: 1.125rem; font-weight: 600; }

.ashby-job-posting-left-pane ul,
.ashby-job-posting-left-pane ol {
    padding-left: 22px;
    margin: 12px 0;
}

.ashby-job-posting-left-pane li {
    margin-bottom: 6px;
    color: var(--colorNeutral700);
}

/* Tabs (overview / application) */
.ashby-job-posting-right-pane {
    background: var(--colorCardBackground);
    border-radius: var(--borderRadiusContainer);
    border: 1px solid var(--colorNeutral200);
    overflow: hidden;
}

.ashby-job-posting-right-pane-tab-slider {
    display: flex;
    border-bottom: 1px solid var(--colorNeutral200);
    background: var(--colorNeutral50);
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-weight: 500;
    color: var(--colorNeutral500);
    cursor: pointer;
    transition: color var(--transitionBase), background var(--transitionBase);
    border: none;
    background: transparent;
    font-family: var(--fontFamily);
}

.ashby-job-posting-right-pane-overview-tab:hover,
.ashby-job-posting-right-pane-application-tab:hover {
    color: var(--colorPrimary600);
    background: white;
}

/* ==========================================
   APPLICATION FORM
   ========================================== */
.ashby-application-form-container {
    padding: 24px;
    max-width: var(--widthMaxApplicationForm);
    margin: 0 auto;
}

.ashby-application-form-section-container { margin-bottom: 28px; }

.ashby-application-form-section-header { margin-bottom: 18px; }

.ashby-application-form-section-header-title {
    font-family: var(--fontFamilyHeading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--colorNeutral900);
    margin-bottom: 6px;
}

.ashby-application-form-section-header-description {
    font-size: 0.875rem;
    color: var(--colorNeutral500);
    line-height: 1.5;
}

.ashby-application-form-field-entry { margin-bottom: 18px; }

.ashby-application-form-question-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--colorNeutral900);
    margin-bottom: 6px;
}

.ashby-application-form-question-description {
    font-size: 0.8125rem;
    color: var(--colorNeutral500);
    margin-bottom: 6px;
}

.ashby-application-form-field-entry input[type="text"],
.ashby-application-form-field-entry input[type="email"],
.ashby-application-form-field-entry input[type="tel"],
.ashby-application-form-field-entry input[type="url"],
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutral300);
    border-radius: var(--borderRadiusControl);
    font-family: var(--fontFamily);
    font-size: 0.9375rem;
    color: var(--colorNeutral900);
    background: white;
    transition: border-color var(--transitionBase), box-shadow var(--transitionBase);
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
    outline: none;
    border-color: var(--colorPrimary600);
    box-shadow: 0 0 0 3px var(--colorPrimary100);
}

.ashby-application-form-field-entry textarea {
    min-height: 110px;
    resize: vertical;
}

/* Submit button — solid, no gradient */
.ashby-application-form-submit-button {
    font-family: var(--fontFamily);
    width: 100%;
    padding: 12px 24px;
    background: var(--colorPrimary600);
    color: white;
    border: none;
    border-radius: var(--borderRadiusButton);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transitionBase);
}

.ashby-application-form-submit-button:hover  { background: var(--colorPrimary700); }
.ashby-application-form-submit-button:active  { background: var(--colorPrimary900); }
.ashby-application-form-submit-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Success / failure */
.ashby-application-form-success-container,
.ashby-application-form-failure-container {
    padding: 20px 24px;
    border-radius: var(--borderRadiusContainer);
    margin: 24px 0;
    text-align: center;
    font-weight: 500;
}

.ashby-application-form-success-container {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.ashby-application-form-failure-container {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Resume autofill */
.ashby-application-form-autofill-uploader {
    background: var(--colorPrimary50);
    border: 1px dashed var(--colorPrimary600);
    border-radius: var(--borderRadiusContainer);
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
    transition: background var(--transitionBase);
}

.ashby-application-form-autofill-uploader:hover {
    background: var(--colorPrimary100);
}

.ashby-application-form-autofill-input-title {
    font-family: var(--fontFamilyHeading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--colorNeutral900);
    margin-bottom: 4px;
}

.ashby-application-form-autofill-input-description {
    font-size: 0.875rem;
    color: var(--colorNeutral500);
}

.ashby-application-form-autofill-input-icon {
    font-size: 1.75rem;
    margin-bottom: 8px;
    color: var(--colorPrimary600);
}

.ashby-application-form-texting-consent-description {
    font-size: 0.8125rem;
    color: var(--colorNeutral500);
    margin-top: 6px;
}

.ashby-survey-form-container {
    background: var(--colorNeutral50);
    padding: 20px;
    border-radius: var(--borderRadiusContainer);
    margin-top: 24px;
    border: 1px solid var(--colorNeutral200);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .ashby-job-board-heading   { font-size: 1.625rem; }
    .ashby-job-posting-heading { font-size: 1.5rem; }
    .ashby-job-posting-header  { padding: 20px; }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
*:focus-visible {
    outline: 2px solid var(--colorPrimary600);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}