/**
 * PLGC WP Job Openings — Theme Stylesheet
 *
 * Overrides WP Job Openings plugin default styles to match
 * the PLGC design system and WCAG 2.1 AA compliance.
 *
 * CSS class prefix: awsm-job-* (plugin native)
 * Body class: .single_awsm_job_openings (single job page)
 * Post type: awsm_job_openings
 *
 * WCAG 2.1 AA:
 *   SC 1.4.3  — all text ≥4.5:1 ✅
 *   SC 1.4.11 — input borders #2D5032 on white 9.1:1 ✅
 *   SC 2.4.7  — focus ring #567915 on white 5.07:1 ✅
 *   SC 2.5.5  — inputs min 44px, touch targets 44×44 ✅
 *   SC 1.4.1  — errors: not colour alone ✅
 *   SC 2.1.1  — all interactive elements keyboard accessible ✅
 *
 * @package PLGC
 * @since   1.7.23
 */

/* ============================================================
   1. SINGLE JOB PAGE — LAYOUT & SPACING
   ============================================================ */

/* Breathing room from header and footer.
   Target both possible body class formats, the main element,
   and the custom single-awsm_job_openings.php template wrapper. */
.single-awsm_job_openings .site-main,
.single-awsm_job_openings #content,
.single_awsm_job_openings .site-main,
.single_awsm_job_openings #content,
main.awsm_job_openings,
.plgc-job-single {
    padding-top: 4rem;
    padding-bottom: 5rem;
}

/* Constrain content width + center — applies to AWSM plugin wrapper
   AND the custom template's content div.
   72rem = 1152px — matches single event page and feels proportional
   to the rest of the site's page widths. */
.awsm-job-single-wrap,
.plgc-job-single__content {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Plugin native "Back to listings" link
   Rendered at bottom in: .awsm-jobs-pro-listings-link-container a */
.awsm-jobs-pro-listings-link-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--plgc-medium-grey, #E7E4E4);
}

.awsm-jobs-pro-listings-link-container a.awsm-jobs-pro-listings-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--plgc-dark-green, #567915);
    text-decoration: underline;
    transition: color var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-jobs-pro-listings-link-container a.awsm-jobs-pro-listings-link:hover {
    color: var(--plgc-black, #000000);
}

.awsm-jobs-pro-listings-link-container a.awsm-jobs-pro-listings-link:focus-visible {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915);
    outline-offset: var(--plgc-focus-offset, 0.125rem);
}

/* Page title (H1) — injected via the_content filter in functions.php */
.awsm-job-page-title {
    font-family: var(--plgc-font-heading, 'Libre Baskerville', serif);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.333;
    color: var(--plgc-black, #000000);
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    display: block !important;
    position: relative;
}

/* Yellow accent bar under H1 — matches Elementor page title treatment */
.awsm-job-page-title::after {
    content: '';
    display: block;
    width: 8rem;
    height: 3px;
    background: var(--plgc-yellow, #FFAE40);
    margin-top: 0.75rem;
    border-radius: 2px;
}

/* Plugin native specs bar — above content
   .awsm-job-specifications-container.awsm_job_spec_above_content */
.awsm-job-specifications-container.awsm_job_spec_above_content {
    margin-bottom: 1.5rem;
}

.awsm-job-specifications-container .awsm-job-specification-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--plgc-medium-grey, #E7E4E4);
    border-bottom: 1px solid var(--plgc-medium-grey, #E7E4E4);
}

.awsm-job-specification-item {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--plgc-black, #000000);
}

.awsm-job-specification-item .awsm-job-specification-label strong {
    font-weight: 700;
}

.awsm-job-specification-item .awsm-job-specification-term {
    font-weight: 400;
}

/* Job content area — body copy */
.awsm-job-entry-content,
.awsm-job-entry-content p {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    line-height: 2;
    color: var(--plgc-black, #000000);
}

/* Content headings (H2 within job description) */
.awsm-job-entry-content h2,
.awsm-job-entry-content h2.wp-block-heading {
    font-family: var(--plgc-font-heading, 'Libre Baskerville', serif);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.333;
    color: var(--plgc-black, #000000);
    margin: 2rem 0 1rem;
}

.awsm-job-entry-content h3 {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--plgc-black, #000000);
    margin: 1.5rem 0 0.75rem;
}

/* Bullet lists in job description */
.awsm-job-entry-content ul,
.awsm-job-entry-content ul.wp-block-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0.75rem 0 1.5rem;
}

.awsm-job-entry-content ul li {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--plgc-black, #000000);
    margin-bottom: 0.25rem;
}

/* Links within job content — WCAG SC 1.4.1: underline always */
.awsm-job-entry-content a {
    color: var(--plgc-black, #000000);
    text-decoration: underline;
    transition: color var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-job-entry-content a:hover,
.awsm-job-entry-content a:focus {
    color: var(--plgc-dark-green, #567915);
}

.awsm-job-entry-content a:focus-visible {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915);
    outline-offset: var(--plgc-focus-offset, 0.125rem);
}

/* ============================================================
   2. JOB SPECIFICATIONS
   Styled above in section 1 — native plugin markup is used.
   ============================================================ */

/* ============================================================
   3. APPLICATION FORM
   ============================================================ */

/* Form container */
.awsm-job-form-inner {
    background: var(--plgc-light-grey, #F2F2F2);
    border: 1px solid var(--plgc-medium-grey, #E7E4E4);
    border-radius: 0.5rem;
    padding: 2rem;
    margin-top: 1rem;
}

/* "Apply for this position" heading */
.awsm-job-form-inner h2,
.awsm-job-form-inner .awsm-job-form-title {
    font-family: var(--plgc-font-heading, 'Libre Baskerville', serif);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.333;
    color: var(--plgc-black, #000000);
    margin: 0 0 0.5rem;
}

/* Section headings within form (Personal Information, Work Eligibility, etc.) */
.awsm-job-form-inner h3,
.awsm-job-form-inner .awsm-job-form-section-title {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--plgc-black, #000000);
    margin: 1.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--plgc-medium-grey, #E7E4E4);
}

/* First section heading — no top border */
.awsm-job-form-inner h3:first-of-type,
.awsm-job-form-inner .awsm-job-form-section-title:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* Field groups */
.awsm-job-form-group {
    margin-bottom: 1rem;
}

/* Labels */
.awsm-job-form-group label,
.awsm-job-form-inner label {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--plgc-black, #000000) !important;
    display: block;
    margin-bottom: 0.375rem;
}

/* Required indicator — plugin uses .awsm-job-form-error for the asterisk */
.awsm-job-form-group label .awsm-job-form-error,
.awsm-job-form-inner .awsm-job-form-error:not(.awsm-job-form-error-message) {
    color: #B91C1C !important; /* Red — 5.74:1 on #F2F2F2 ✅, 7.8:1 on white ✅ */
    font-weight: 600;
}

/* Text inputs, selects, textareas */
.awsm-job-form-control,
.awsm-job-form-inner input[type="text"],
.awsm-job-form-inner input[type="email"],
.awsm-job-form-inner input[type="tel"],
.awsm-job-form-inner input[type="url"],
.awsm-job-form-inner input[type="date"],
.awsm-job-form-inner input[type="number"],
.awsm-job-form-inner select,
.awsm-job-form-inner textarea {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--plgc-black, #000000);
    background: var(--plgc-white, #FFFFFF);
    border: 1px solid var(--plgc-medium-green-tone, #2D5032); /* 9.1:1 on white ✅ SC 1.4.11 */
    border-radius: 0.25rem;
    padding: 0.625rem 0.75rem;
    min-height: 2.875rem; /* 46px — SC 2.5.5 */
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--plgc-transition-fast, 150ms ease-in-out),
                box-shadow var(--plgc-transition-fast, 150ms ease-in-out);
    -webkit-appearance: none;
    appearance: none;
}

/* Date input — preserve native date picker UI */
.awsm-job-form-inner input[type="date"] {
    -webkit-appearance: auto;
    appearance: auto;
}

/* Textarea specific */
.awsm-job-form-inner textarea {
    min-height: 7.5rem;
    resize: vertical;
}

/* Select dropdown arrow */
.awsm-job-form-inner select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000000' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    padding-right: 2.5rem;
}

/* Input focus — SC 2.4.7 */
.awsm-job-form-inner input:focus,
.awsm-job-form-inner select:focus,
.awsm-job-form-inner textarea:focus {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915);
    outline-offset: var(--plgc-focus-offset, 0.125rem);
    border-color: var(--plgc-dark-green, #567915);
    box-shadow: 0 0 0 1px var(--plgc-dark-green, #567915);
}

/* Placeholder */
.awsm-job-form-inner input::placeholder,
.awsm-job-form-inner textarea::placeholder {
    color: #6B7280; /* 4.6:1 on white ✅ */
    opacity: 1;
}

/* ============================================================
   3a-ii. SELECTRIC CUSTOM DROPDOWN
   The plugin replaces <select> with a custom UI using
   .awsm-selectric-wrapper > .awsm-selectric (trigger)
   and .awsm-selectric-items (dropdown list).
   ============================================================ */

.awsm-selectric-wrapper {
    width: 100%;
}

/* Trigger — the visible "select" element */
.awsm-selectric {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    color: var(--plgc-black, #000000);
    background: var(--plgc-white, #FFFFFF);
    border: 1px solid var(--plgc-medium-green-tone, #2D5032);
    border-radius: 0.25rem;
    padding: 0.625rem 2.5rem 0.625rem 0.75rem;
    min-height: 2.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: border-color var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-selectric:hover {
    border-color: var(--plgc-dark-green, #567915);
}

.awsm-selectric .label {
    font-size: 1rem;
    color: var(--plgc-black, #000000);
}

.awsm-selectric .awsm-selectric-arrow-drop {
    position: absolute;
    right: 0.75rem;
    color: var(--plgc-black, #000000);
}

/* Dropdown items list */
.awsm-selectric-items {
    background: var(--plgc-white, #FFFFFF);
    border: 1px solid var(--plgc-medium-green-tone, #2D5032);
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.awsm-selectric-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.awsm-selectric-items li {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    color: var(--plgc-black, #000000);
    padding: 0.625rem 0.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-selectric-items li:hover,
.awsm-selectric-items li.highlighted {
    background: var(--plgc-very-light-green, #E5F0D0);
}

.awsm-selectric-items li.selected {
    background: var(--plgc-very-light-green, #E5F0D0);
    font-weight: 600;
}

/* Focus state for selectric */
.awsm-selectric-wrapper .awsm-selectric-input:focus + .awsm-selectric,
.awsm-selectric-wrapper.awsm-selectric-focus .awsm-selectric {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915);
    outline-offset: var(--plgc-focus-offset, 0.125rem);
    border-color: var(--plgc-dark-green, #567915);
}

/* ============================================================
   3b. RADIO BUTTONS & CHECKBOXES — SC 2.5.5 touch targets
   The plugin wraps each option in:
   .awsm-job-form-options-container > span > input.awsm-job-form-options-control + label
   We style the <span> as the clickable hit area at 44px min.
   ============================================================ */

/* Options container — horizontal layout with wrapping */
.awsm-application-form .awsm-job-form-options-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem 1rem !important;
    margin-top: 0.25rem !important;
}

/* Each option <span> — 44px min touch target (SC 2.5.5) */
.awsm-application-form .awsm-job-form-options-container > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 2.75rem !important; /* 44px */
    padding: 0.375rem 0.75rem !important;
    border: 1px solid var(--plgc-medium-grey, #E7E4E4) !important;
    border-radius: 0.25rem !important;
    background: var(--plgc-white, #FFFFFF) !important;
    cursor: pointer !important;
    transition: border-color var(--plgc-transition-fast, 150ms ease-in-out),
                background-color var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-application-form .awsm-job-form-options-container > span:hover {
    border-color: var(--plgc-dark-green, #567915) !important;
    background: var(--plgc-very-light-green, #E5F0D0) !important;
}

/* When the input inside is checked, highlight the span */
.awsm-application-form .awsm-job-form-options-container > span:has(input:checked) {
    border-color: var(--plgc-dark-green, #567915) !important;
    background: var(--plgc-very-light-green, #E5F0D0) !important;
}

/* The actual radio/checkbox input — use plugin's own class for specificity */
.awsm-application-form .awsm-job-form-options-control[type="radio"],
.awsm-application-form .awsm-job-form-options-control[type="checkbox"],
.awsm-job-form-options-container input.awsm-job-form-options-control {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    margin: 0 0.5rem 0 0 !important;
    padding: 0 !important;
    accent-color: var(--plgc-dark-green, #567915) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* Label next to radio/checkbox — no extra spacing, inherits cursor */
.awsm-application-form .awsm-job-form-options-container > span > label {
    display: inline !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    min-height: auto !important;
}

/* Focus ring on the input within the span */
.awsm-application-form .awsm-job-form-options-control:focus-visible {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915) !important;
    outline-offset: var(--plgc-focus-offset, 0.125rem) !important;
}

/* Also style the span when a child input is focused for extra visibility */
.awsm-application-form .awsm-job-form-options-container > span:has(input:focus-visible) {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915) !important;
    outline-offset: var(--plgc-focus-offset, 0.125rem) !important;
}

/* Privacy/consent checkbox (different structure — .awsm-job-inline-group) */
.awsm-application-form .awsm-job-inline-group {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    min-height: 2.75rem !important; /* 44px */
    padding: 0.5rem 0 !important;
}

.awsm-application-form .awsm-job-inline-group input[type="checkbox"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    margin-top: 0.125rem !important;
    accent-color: var(--plgc-dark-green, #567915) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

.awsm-application-form .awsm-job-inline-group label {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    cursor: pointer !important;
}

/* ============================================================
   3c. FILE UPLOAD AREA
   ============================================================ */

.awsm-job-form-inner .awsm-job-form-upload-area,
.awsm-job-form-inner .awsm-job-dropzone {
    border: 2px dashed var(--plgc-medium-green-tone, #2D5032);
    border-radius: 0.5rem;
    background: var(--plgc-white, #FFFFFF);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--plgc-transition-fast, 150ms ease-in-out),
                background-color var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-job-form-inner .awsm-job-form-upload-area:hover,
.awsm-job-form-inner .awsm-job-dropzone:hover {
    border-color: var(--plgc-dark-green, #567915);
    background: var(--plgc-very-light-green, #E5F0D0);
}

.awsm-job-form-inner .awsm-job-form-upload-area:focus-within,
.awsm-job-form-inner .awsm-job-dropzone:focus-within {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915);
    outline-offset: var(--plgc-focus-offset, 0.125rem);
}

/* Allowed file types text */
.awsm-job-form-inner .awsm-job-form-upload-info,
.awsm-job-form-inner .awsm-job-form-upload-area + p,
.awsm-job-form-inner .awsm-job-dropzone + .awsm-job-form-note {
    font-size: 0.875rem;
    color: #4B5563; /* 7.5:1 on white ✅ */
    margin-top: 0.375rem;
}

/* ============================================================
   3d. SUBMIT BUTTON — matches PLGC primary button style
   Actual markup: input.awsm-application-submit-btn#awsm-application-submit-btn
   ============================================================ */

.awsm-application-form .awsm-application-submit-btn,
#awsm-application-submit-btn,
.awsm-job-form-inner input[type="submit"].awsm-application-submit-btn {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--plgc-black, #000000) !important;
    background: var(--plgc-yellow, #FFAE40) !important;
    border: none !important;
    border-radius: 6.25rem !important; /* pill shape */
    padding: 0.9375rem 2rem !important;
    min-height: 2.875rem !important; /* 46px — SC 2.5.5 */
    min-width: 10rem !important;
    cursor: pointer !important;
    transition: background-color var(--plgc-transition-fast, 150ms ease-in-out);
    -webkit-appearance: none !important;
    appearance: none !important;
}

.awsm-application-form .awsm-application-submit-btn:hover,
#awsm-application-submit-btn:hover {
    background: var(--plgc-light-yellow, #FDBC69) !important;
    text-decoration: underline !important;
}

.awsm-application-form .awsm-application-submit-btn:focus-visible,
#awsm-application-submit-btn:focus-visible {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915) !important;
    outline-offset: var(--plgc-focus-offset, 0.125rem) !important;
    background: var(--plgc-light-yellow, #FDBC69) !important;
}

/* ============================================================
   3e. CONSENT & AGREEMENT SECTION
   ============================================================ */

/* Certification text (rendered as .awsm-job-form-section-description p) */
.awsm-job-form-section-group .awsm-job-form-section-description p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151; /* 8.6:1 on #F2F2F2 ✅ */
    background: var(--plgc-white, #FFFFFF);
    padding: 1rem;
    border-left: 3px solid var(--plgc-dark-green, #567915);
    margin-bottom: 1rem;
    border-radius: 0 0.25rem 0.25rem 0;
}

/* ============================================================
   3f. FORM VALIDATION / ERROR STATES — SC 1.4.1 not colour alone
   Only apply error styles AFTER the plugin adds its error class
   on submission. Never use :invalid alone — it fires on page load
   for empty required fields (especially date inputs).
   ============================================================ */

.awsm-application-form .awsm-job-form-group.awsm-job-form-has-error input,
.awsm-application-form .awsm-job-form-group.awsm-job-form-has-error select,
.awsm-application-form .awsm-job-form-group.awsm-job-form-has-error textarea,
.awsm-application-form input.awsm-job-form-error,
.awsm-application-form input.error,
.awsm-application-form select.error,
.awsm-application-form textarea.error {
    border-color: #B91C1C !important;
    border-left-width: 3px !important;
}

.awsm-application-form .awsm-job-form-error-message,
.awsm-application-form .awsm-job-error-message,
.awsm-application-form label.error {
    color: #B91C1C; /* 5.74:1 on #F2F2F2 ✅ */
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Success message */
.awsm-job-form-inner .awsm-job-form-success-message {
    background: var(--plgc-very-light-green, #E5F0D0);
    border: 1px solid var(--plgc-dark-green, #567915);
    border-radius: 0.25rem;
    padding: 1rem 1.5rem;
    color: var(--plgc-black, #000000);
    font-weight: 600;
}

/* ============================================================
   4. JOB LISTINGS PAGE (archive / shortcode output)

   Actual markup structure:
   .awsm-job-listing-item.awsm-list-item
     └─ .awsm-job-item
         ├─ .awsm-list-left-col
         │   └─ h2.awsm-job-post-title > a
         └─ .awsm-list-right-col
             ├─ .awsm-job-specification-wrapper
             │   └─ .awsm-job-specification-item
             │       ├─ i.awsm-job-icon-*
             │       └─ span.awsm-job-specification-term
             └─ .awsm-job-more-container
                 └─ a.awsm-job-more
   ============================================================ */

/* Listing wrapper */
.awsm-job-wrap,
.awsm-job-listings.awsm-lists {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
}

/* Listing container — inherits page width from Elementor */
.awsm-job-wrap {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
}

/* Individual job listing card — compact rows */
.awsm-job-listings .awsm-job-listing-item.awsm-list-item {
    background: var(--plgc-white, #FFFFFF) !important;
    border: 1px solid var(--plgc-medium-grey, #E7E4E4) !important;
    border-radius: 0.375rem !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    overflow: hidden;
    transition: border-color var(--plgc-transition-fast, 150ms ease-in-out),
                box-shadow var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-job-listings .awsm-job-listing-item.awsm-list-item:hover {
    border-color: var(--plgc-dark-green, #567915) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Inner wrapper — this is where the actual layout lives */
.awsm-job-listings .awsm-list-item .awsm-job-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.875rem 1.25rem !important;
    gap: 1rem !important;
    border: none !important;
    border-bottom: none !important;
}

/* Remove any inner dividers — borders, hrs, pseudo-elements */
.awsm-job-listings .awsm-list-item .awsm-job-item::after,
.awsm-job-listings .awsm-list-item .awsm-job-item::before,
.awsm-job-listings .awsm-list-item::after,
.awsm-job-listings .awsm-list-item::before {
    display: none !important;
}

/* Left column — title takes up available space */
.awsm-job-listings .awsm-list-item .awsm-list-left-col {
    flex: 1 1 auto;
    min-width: 0; /* allow text truncation */
}

/* Right column — specs + CTA button */
.awsm-job-listings .awsm-list-item .awsm-list-right-col {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-shrink: 0;
}

/* Job title link */
.awsm-job-listings .awsm-list-item h2.awsm-job-post-title {
    margin: 0 !important;
    padding: 0 !important;
}

.awsm-job-listings .awsm-list-item h2.awsm-job-post-title a {
    font-family: var(--plgc-font-heading, 'Libre Baskerville', serif) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--plgc-black, #000000) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--plgc-yellow, #FFAE40) !important;
    text-underline-offset: 0.1875rem !important;
    text-decoration-thickness: 2px !important;
    transition: color var(--plgc-transition-fast, 150ms ease-in-out),
                text-decoration-color var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-job-listings .awsm-list-item h2.awsm-job-post-title a:hover {
    color: var(--plgc-dark-green, #567915) !important;
    text-decoration-color: var(--plgc-dark-green, #567915) !important;
}

.awsm-job-listings .awsm-list-item h2.awsm-job-post-title a:focus-visible {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915) !important;
    outline-offset: var(--plgc-focus-offset, 0.125rem) !important;
}

/* Spec value as pill badge — black text on light green for WCAG SC 1.4.3
   #000000 on #E5F0D0 = 15.5:1 ✅ */
.awsm-job-listings .awsm-list-item .awsm-job-specification-term {
    display: inline-block !important;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    padding: 0.1875rem 0.625rem !important;
    border-radius: 6.25rem !important;
    background: var(--plgc-very-light-green, #E5F0D0) !important;
    color: var(--plgc-black, #000000) !important;
    white-space: nowrap !important;
}

/* Spec icon — keep visible, tint green */
.awsm-job-listings .awsm-list-item .awsm-job-specification-item i {
    color: var(--plgc-dark-green, #567915) !important;
    font-size: 0.875rem !important;
    margin-right: 0.25rem !important;
}

/* Hide the "Job Category:" label text — just show the pill */
.awsm-job-listings .awsm-list-item .awsm-job-specification-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* "View & Apply →" — yellow pill button
   Actual class: a.awsm-job-more (no 's') */
.awsm-job-listings .awsm-list-item a.awsm-job-more,
.awsm-job-more-container a.awsm-job-more {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--plgc-black, #000000) !important;
    background: var(--plgc-yellow, #FFAE40) !important;
    text-decoration: none !important;
    padding: 0.375rem 1rem !important;
    border-radius: 6.25rem !important;
    white-space: nowrap !important;
    min-height: 2.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: background-color var(--plgc-transition-fast, 150ms ease-in-out);
}

.awsm-job-listings .awsm-list-item a.awsm-job-more:hover,
.awsm-job-more-container a.awsm-job-more:hover {
    background: var(--plgc-light-yellow, #FDBC69) !important;
    text-decoration: underline !important;
}

.awsm-job-listings .awsm-list-item a.awsm-job-more:focus-visible,
.awsm-job-more-container a.awsm-job-more:focus-visible {
    outline: var(--plgc-focus-width, 0.125rem) solid var(--plgc-focus-color, #567915) !important;
    outline-offset: var(--plgc-focus-offset, 0.125rem) !important;
    background: var(--plgc-light-yellow, #FDBC69) !important;
}

/* Hide the arrow span inside View & Apply if empty */
.awsm-job-listings .awsm-list-item a.awsm-job-more span:empty {
    display: none !important;
}

/* "No job openings" message */
.awsm-jobs-none-container,
.awsm-no-jobs-message {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    color: var(--plgc-black, #000000);
    text-align: center;
    padding: 2rem;
}

/* ============================================================
   5. FILTERS (listing page — .awsm-filter-wrap)
   ============================================================ */

.awsm-filter-wrap {
    margin-bottom: 1.5rem !important;
}

/* Filter items row — tighter layout */
.awsm-filter-wrap .awsm-filter-items {
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

/* Selectric filter dropdowns — compact trigger */
.awsm-filter-wrap .awsm-selectric-wrapper {
    max-width: 16rem !important;
}

.awsm-filter-wrap .awsm-selectric {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.875rem !important;
    color: var(--plgc-black, #000000) !important;
    background: var(--plgc-white, #FFFFFF) !important;
    border: 1px solid var(--plgc-medium-green-tone, #2D5032) !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 2rem 0.25rem 0.625rem !important;
    min-height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

.awsm-filter-wrap .awsm-selectric:hover {
    border-color: var(--plgc-dark-green, #567915) !important;
}

.awsm-filter-wrap .awsm-selectric-items li {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
}

.awsm-filter-wrap .awsm-selectric-items li:hover,
.awsm-filter-wrap .awsm-selectric-items li.highlighted {
    background: var(--plgc-very-light-green, #E5F0D0) !important;
}

.awsm-filter-wrap .awsm-selectric-items li.selected {
    background: var(--plgc-very-light-green, #E5F0D0) !important;
    font-weight: 600 !important;
}

/* ============================================================
   6. REDUCED MOTION — SC 2.3.3
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .awsm-job-listings .awsm-job-listing-item,
    .awsm-job-form-inner input,
    .awsm-job-form-inner select,
    .awsm-job-form-inner textarea,
    #awsm-application-submit-btn,
    .awsm-application-form .awsm-job-form-options-container > span,
    .awsm-job-entry-content a,
    .awsm-job-listings .awsm-list-item a.awsm-job-more {
        transition: none !important;
    }
}

/* ============================================================
   7. RESPONSIVE — Tablet (≤1024px)
   ============================================================ */

@media (max-width: 64rem) {
    .awsm-job-form-inner {
        padding: 1.5rem;
    }

    .single-awsm_job_openings .site-main,
    .single_awsm_job_openings .site-main,
    .single-awsm_job_openings #content,
    .single_awsm_job_openings #content,
    main.awsm_job_openings {
        padding-top: 2.5rem;
        padding-bottom: 3.5rem;
    }

    .awsm-job-page-title {
        font-size: 2rem;
    }

    .awsm-job-form-inner h2,
    .awsm-job-form-inner .awsm-job-form-title {
        font-size: 1.5rem;
    }

    .awsm-job-entry-content h2,
    .awsm-job-entry-content h2.wp-block-heading {
        font-size: 1.5rem;
    }
}

/* ============================================================
   8. RESPONSIVE — Mobile (≤767px)
   ============================================================ */

@media (max-width: 47.9375rem) {
    .awsm-job-form-inner {
        padding: 1.25rem 1rem;
        border-radius: 0.25rem;
    }

    /* Single job page: tighter side padding on mobile so content is fuller */
    .plgc-job-single__content,
    .awsm-job-single-wrap {
        padding: 0 1rem !important;
    }
    .plgc-job-single {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    .single-awsm_job_openings .site-main,
    .single_awsm_job_openings .site-main,
    .single-awsm_job_openings #content,
    .single_awsm_job_openings #content,
    main.awsm_job_openings {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    /* Filter dropdowns: side-by-side on mobile (Job Category + Job Type) */
    .awsm-filter-wrap .awsm-filter-items {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    .awsm-filter-wrap .awsm-filter-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    .awsm-filter-wrap .awsm-selectric-wrapper {
        max-width: none !important;
        width: 100% !important;
    }
    .awsm-filter-wrap .awsm-selectric {
        font-size: 0.8125rem !important;
        padding: 0.25rem 1.5rem 0.25rem 0.5rem !important;
    }

    .awsm-job-page-title {
        font-size: 1.75rem;
    }

    .awsm-job-form-inner h2,
    .awsm-job-form-inner .awsm-job-form-title {
        font-size: 1.375rem;
    }

    .awsm-job-entry-content h2,
    .awsm-job-entry-content h2.wp-block-heading {
        font-size: 1.375rem;
    }

    /* Stack radio/checkbox option spans vertically on mobile */
    .awsm-application-form .awsm-job-form-options-container {
        flex-direction: column !important;
        gap: 0.375rem !important;
    }

    .awsm-application-form .awsm-job-form-options-container > span {
        width: 100% !important;
    }

    .awsm-job-specifications-container .awsm-job-specification-wrapper {
        flex-direction: column;
        gap: 0.375rem;
    }

    /* Listing cards — stack on mobile */
    .awsm-job-listings .awsm-list-item .awsm-job-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .awsm-job-listings .awsm-list-item .awsm-list-right-col {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .awsm-job-listings .awsm-list-item h2.awsm-job-post-title a {
        font-size: 1rem !important;
    }

    /* Prevent form inputs from overflowing on small screens */
    .awsm-job-form-inner {
        overflow: hidden;
    }

    .awsm-job-form-inner input,
    .awsm-job-form-inner select,
    .awsm-job-form-inner textarea {
        max-width: 100%;
    }

    /* Selectric dropdown — constrain to container */
    .awsm-selectric-items {
        max-width: 100%;
    }

    /* Back link */
    .awsm-jobs-pro-listings-link-container a {
        font-size: 0.875rem;
    }
}

/* ============================================================
   9. RESPONSIVE — Very Small (≤375px)
   ============================================================ */

@media (max-width: 23.4375rem) {
    .awsm-job-single-wrap {
        padding: 0 1rem;
    }

    .awsm-job-form-inner {
        padding: 1rem 0.75rem;
    }

    .awsm-job-page-title {
        font-size: 1.5rem;
    }

    .awsm-job-entry-content h2,
    .awsm-job-entry-content h2.wp-block-heading {
        font-size: 1.25rem;
    }

    /* Dropzone text */
    .awsm-form-drag-and-drop-file-control .dz-message {
        font-size: 0.875rem;
    }
}