/*
 * Job Openings Page — custom styles
 * All colors are defined as CSS custom properties below.
 * Search for --job-openings- to compare with other page palettes.
 */

:root {
    /* Job Openings — brand */
    --job-openings-navy:        #002b5c;   /* SIL Navy: headings, buttons, primary */
    --job-openings-cyan:        #00ADEF;   /* SIL Cyan: accent, hover, links */
    --job-openings-link-blue:   #0056b3;   /* Matches the site's base link color (custom-style.css `a`) — use where --job-openings-cyan's ~2.4:1 contrast fails WCAG AA on a light background */
    --job-openings-teal:        #0f766e;   /* Second information color: the Commitment checkmarks in the Table view, clearly distinct from the navy Role ones. 5.47:1 on white, 5.00:1 on --job-openings-surface-alt — both pass AA, which matters because these carry meaning, not decoration */

    /* Job Openings — surfaces */
    --job-openings-page-bg:     #F8FAFC;   /* Page background */
    --job-openings-card-bg:     #ffffff;   /* Card / panel background */
    --job-openings-surface-alt: #F1F5F9;   /* One step darker than the page background: list-row hover, role pills, the Table header band. Chosen for real contrast headroom rather than style — same value and reason as .software-filter-option:hover in software-style.css */
    --job-openings-border:      #e2e8f0;   /* Card and input borders */
    --job-openings-border-strong: #cbd5e1; /* Heavier rule: the Table header's bottom edge and the divider between the Role and Commitment column groups */
    --job-openings-border-hover: #00ADEF;  /* Card border on hover */

    /* Job Openings — text */
    --job-openings-text:        #1e293b;   /* Primary body text */
    --job-openings-text-muted:  #64748b;   /* Labels, secondary text */
    --job-openings-text-light:  #94a3b8;   /* Placeholder text */

    /* Job Openings — badges */
    --job-openings-navy-bg:     rgba(0,43,92,0.06);
    --job-openings-cyan-bg:     rgba(0,173,239,0.08);

    /* Job Openings — validation errors */
    --job-openings-error:        #ef4444;
    --job-openings-error-border: #fca5a5;
    --job-openings-error-bg:     rgba(254, 242, 242, 0.35);
}

/* ── Page wrapper ─────────────────────────────────────────────────────────── */

.job-openings-page {
    /* No horizontal padding — the shared .container already insets content to
       the breadcrumb's left edge; an extra 20px pushed the whole page in past
       the breadcrumb (worst on mobile, where it wastes width). Aligns with the
       breadcrumb and the simple-page pages. */
    padding: 24px 0 48px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.job-openings-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--job-openings-border);
    padding-bottom: 28px;
    margin-bottom: 28px;
}

.job-openings-header-left h1 {
    font-size: 36px;
    font-weight: 800;
    color: var(--job-openings-navy);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.job-openings-header-left p {
    color: var(--job-openings-text-muted);
    font-size: 17px;
    font-weight: 500;
    margin: 0;
}

.job-openings-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.job-openings-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.job-openings-badge i {
    font-size: 16px;
}

a.job-openings-badge:hover,
a.job-openings-badge:focus,
a.job-openings-badge:active,
a.job-openings-badge:visited {
    transform: translateY(-2px);
    text-decoration: none;
    text-decoration-color: transparent;
}

a.job-openings-badge:focus:not(:hover),
a.job-openings-badge:active:not(:hover),
a.job-openings-badge:visited:not(:hover) {
    transform: none;
}

.job-openings-badge--navy {
    background: var(--job-openings-navy-bg);
    border: 1px solid rgba(0,43,92,0.12);
    color: var(--job-openings-navy);
    box-shadow: 0 2px 8px rgba(0,43,92,0.08);
}

a.job-openings-badge--navy:hover {
    color: var(--job-openings-navy);
    box-shadow: 0 8px 20px rgba(0,43,92,0.18);
}

.job-openings-badge--cyan {
    background: rgba(0,144,200,0.06);
    border: 1px solid rgba(0,144,200,0.22);
    color: #0090c8;
    box-shadow: 0 2px 8px rgba(0,144,200,0.08);
}

a.job-openings-badge--cyan:hover {
    color: #0090c8;
    box-shadow: 0 8px 20px rgba(0,144,200,0.18);
}

/* ── Filter section (header + bar card) ──────────────────────────────────── */

.job-filter-section {
    margin-bottom: 20px;
}

.job-filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
    min-height: 24px;
}

.job-filter-section-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 43, 92, 0.6);
}

.job-filter-bar {
    background: var(--job-openings-card-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

/* Search field — 2/5 of the bar */
.job-filter-search {
    flex: 2;
    min-width: 200px;
}

.job-filter-search label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--job-openings-text-muted);
    margin-bottom: 6px;
}

.job-filter-search-inner {
    position: relative;
}

.job-filter-search-inner .job-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--job-openings-text-light);
    pointer-events: none;
    font-size: 14px;
}

/* Search input — we render this ourselves so no !important needed */
.job-filter-bar .awsm-job-search {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--job-openings-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--job-openings-text);
    background: var(--job-openings-card-bg);
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    outline: none;
}

.job-filter-bar .awsm-job-search:focus {
    border-color: var(--job-openings-cyan);
    box-shadow: 0 0 0 3px rgba(0,173,239,0.15);
}

.job-filter-bar .awsm-job-search::placeholder {
    color: var(--job-openings-text-light);
}


/* Custom dropdown filters — 3/5 of the bar (each of 3 dropdowns = 1/5) */
.job-custom-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex: 3;
    align-items: flex-end;
}

.job-filter-dropdown {
    position: relative;
    min-width: 140px;
    flex: 1;
}

.job-filter-dropdown label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--job-openings-text-muted);
    margin-bottom: 6px;
}

.job-filter-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: var(--job-openings-card-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--job-openings-text);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
    gap: 8px;
}

.job-filter-btn:hover,
.job-filter-dropdown.is-open .job-filter-btn {
    border-color: var(--job-openings-cyan);
}

.job-filter-dropdown.is-open .job-filter-btn {
    box-shadow: 0 0 0 3px rgba(0,173,239,0.15);
}

.job-filter-btn-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-filter-btn-text.is-active {
    color: var(--job-openings-navy);
    font-weight: 600;
}

.job-filter-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--job-openings-text-muted);
    border-bottom: 1.5px solid var(--job-openings-text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-bottom: 3px; /* optical centering */
}

.job-filter-dropdown.is-open .job-filter-chevron {
    transform: rotate(225deg);
    margin-bottom: -1px;
}

.job-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    background: var(--job-openings-card-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 100;
    padding: 6px;
    animation: jobPanelIn 0.12s ease;
}

@keyframes jobPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.job-filter-dropdown.is-open .job-filter-panel {
    display: block;
}

.job-filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--job-openings-text-muted);
    transition: background 0.1s;
}

.job-filter-option:hover {
    background: var(--job-openings-page-bg);
}

.job-filter-option.is-selected {
    color: var(--job-openings-navy);
    font-weight: 600;
}

.job-filter-option-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--job-openings-border);
    background: var(--job-openings-card-bg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.job-filter-option.is-selected .job-filter-option-check {
    background: var(--job-openings-cyan);
    border-color: var(--job-openings-cyan);
    color: #fff;
}

.job-filter-panel-divider {
    height: 1px;
    background: var(--job-openings-border);
    margin: 4px 0;
}

.job-filter-clear-btn {
    display: block;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--job-openings-cyan);
    text-align: center;
    border-radius: 6px;
    transition: background 0.1s;
}

.job-filter-clear-btn:hover {
    background: var(--job-openings-cyan-bg);
}

/* ── Results bar ──────────────────────────────────────────────────────────── */

/* Flex row (count left, view-density toggle right) mirroring .feed-resultsbar
   on News and .software-results-bar on the two catalogs. wrap + row-gap so the
   toggle drops onto its own line rather than squashing the count on very
   narrow phones. */
.job-results-bar {
    padding: 0 2px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.job-results-count {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--job-openings-text-muted);
}

.job-results-count strong {
    color: var(--job-openings-navy);
}

.job-clear-all-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--job-openings-cyan);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0;
    display: none;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.job-clear-all-btn:hover {
    text-decoration: underline;
}

.job-clear-all-btn.is-visible {
    display: flex;
}

/* ── Job cards grid ───────────────────────────────────────────────────────── */

/* Override the plugin's view container.
   auto-fill + minmax means: pack as many 300px columns as fit, stretch to fill.
   Result within Bootstrap container: 3 cols ≥1140px, 2 cols ~600–1140px, 1 col <600px */
.awsm-job-listings,
.awsm-grids,
.awsm-lists {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    align-items: stretch;
    /* The plugin ships `.awsm-row { margin: 0 -15px }` — a Bootstrap-style
       negative gutter that paid for per-column 15px padding this layout no
       longer has, since the grid's own `gap` does the spacing now. Left in,
       it pulled the whole listing 15px wider than its container at every
       width, so Jobs cards sat 15px further out than the Software and Fonts
       cards on the same site — and at phone width that meant hard against
       the screen edge with no margin at all. */
    margin-left: 0;
    margin-right: 0;
}

/* ── Individual job card ──────────────────────────────────────────────────── */

.awsm-job-listing-item {
    /* reset plugin floats/positioning */
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.job-card {
    position: relative; /* anchor for stretched-link ::after */
    background: var(--job-openings-card-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 20px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
}

.job-card:hover {
    border-color: var(--job-openings-border-hover);
    box-shadow: 0 8px 28px rgba(0,43,92,0.1);
    transform: translateY(-2px);
}

.job-card-header {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
    min-height: 24px;
}

.job-card-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.job-role-badge {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--job-openings-page-bg);
    color: var(--job-openings-text-muted);
    border: 1px solid var(--job-openings-border);
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}


.job-card-commitment-text {
    display: block;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--job-openings-text-light);
    margin-top: 0;
    margin-bottom: 12px;
}

.job-card-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--job-openings-navy);
    margin: 0 0 4px;
    line-height: 1.25;
    transition: color 0.2s;
}

.job-card-title a {
    color: inherit;
    text-decoration: none;
}


.job-card-excerpt {
    flex: 1;
    font-size: 14px;
    color: var(--job-openings-text-muted);
    line-height: 1.65;
    margin: 0 0 16px;
}

.job-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    min-height: 28px;
}

.job-tech-tag {
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    background: transparent;
    color: var(--job-openings-text-muted);
    border: 1px solid var(--job-openings-border);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s, color 0.15s;
}

/* Card hover: just swap the border to teal — no weight or layout change */
.job-card:hover .job-tech-tag {
    border-color: rgba(0, 173, 239, 0.45);
}

/* Direct tag hover: darker text reads as bolder; teal border. No lift/shadow/bg. */
.job-tech-tag.is-active,
.job-tech-tag:hover {
    border-color: var(--job-openings-cyan);
    color: var(--job-openings-navy);
    text-shadow: 0 0 0.4px currentColor;
}

.job-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--job-openings-navy);
    color: #fff !important;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    transition: box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,43,92,0.12);
    margin-top: auto;
}

/* a.clicked-link (site.js, custom-style.css) is more specific than a single-class
   !important color rule (adds a type selector) and briefly overrides this button's
   white text on click/tap — pin it back to white. Once the browser has ever
   visited the link, custom-style.css's a.clicked-link:visited rule applies too
   and is MORE specific than a plain two-class override (the :visited pseudo-class
   adds a further point), so :visited must be matched here as well. */
.job-card-btn.clicked-link,
.job-card-btn.clicked-link:visited {
    color: #fff !important;
}

.job-card-btn-arrow {
    transition: transform 0.2s;
    font-size: 16px;
}

.job-card:hover .job-card-btn-arrow {
    transform: translateX(3px);
}

/* Stretched link: .job-card-btn::after covers the entire card */
.job-card-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: 1;
}

/* Interactive elements that sit above the stretched link overlay */
.job-card-title a,
.job-role-badge,
.job-tech-tag {
    position: relative;
    z-index: 2;
}

/* ── Filter result animation ──────────────────────────────────────────────── */

@keyframes jobCardRefresh {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.job-card-refresh .job-card {
    animation: jobCardRefresh 0.35s ease-out both;
}

.job-card-fading .job-card {
    opacity: 0;
    transition: opacity 0.12s ease;
}

/* ── View toggle: the control itself ──────────────────────────────────────────
 * Segmented 3-button group in the results bar (markup in
 * wp-job-openings/job-openings-view.php). Same look as the News feed's
 * .feed-view-toggle and the catalogs' .software-view-toggle so all three read
 * as one system.
 */
.job-view {
    display: flex;
    align-items: center;
    gap: 10px;
}

.job-view-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 43, 92, 0.6);
}

.job-view-toggle {
    display: inline-flex;
    border: 1px solid var(--job-openings-border);
    border-radius: 10px;
    overflow: hidden;
}

.job-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    background: var(--job-openings-card-bg);
    color: var(--job-openings-text-muted);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit; /* buttons don't inherit the page font by default */
    cursor: pointer;
    /* Deliberately NOT transitioned. The grid relayout on a view switch is
       instantaneous, so a 0.15s cross-fade on the pressed button made the
       selection visibly lag the thing it had just changed. */
}

/* Sizing for the Table icon, a Font Awesome glyph. The Card icon is an inline
   SVG and is sized separately by the svg.job-view-icon rule at the end of this
   file — 15px against a 15-unit viewBox. Don't merge the two: font-size does
   nothing to an <svg>, and this rule's 18px box would stretch it. */
.job-view-icon {
    /* Font Awesome glyphs don't fill their em box, so at font-size 15px they
       inked only ~13px tall against the Card SVG's true 15px and read as
       visibly smaller and slightly high. 17px brings fa-table's ink to 15.0px,
       matching the SVG exactly; fa-bars is a flatter glyph and lands at ~12.8px,
       which is as close as a single size gets without making it overbearingly
       wide. Box widened to 18px because fa-table inks ~16.9px across at 17px
       and would otherwise be clipped by a 16px box. */
    font-size: 17px;
    line-height: 1;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}


/* Hidden below 759px (see the responsive block at the end of this section) —
   the SVG icon alone identifies the button there, and each button's aria-label
   keeps it accessible either way. */
.job-view-btn-label {
    white-space: nowrap;
}

.job-view-btn + .job-view-btn {
    border-left: 1px solid var(--job-openings-border);
}

.job-view-btn:hover,
.job-view-btn:focus-visible {
    color: var(--job-openings-navy);
}

.job-view-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.job-view-btn.is-active {
    background: var(--job-openings-navy);
    color: #fff;
}

/* ── View modes: Card / Table ────────────────────────────────────────────────
 * data-view lives on .awsm-job-wrap (set by js/job-search.js — that wrapper
 * survives the plugin's "load more" AJAX replacing the cards inside it).
 *
 *   Card    the DEFAULT — the multi-column card grid this page has always had.
 *           No rules of its own, so it can't drift from the base CSS.
 *   Table   a full-width SINGLE-COLUMN list of dense rows, turned into a real
 *           support table: one fixed column per Role term, then one per
 *           Commitment term, checkmarked per job, under a sticky header.
 *           Modelled on the Software catalog's OS matrix (see "Compact view: OS
 *           support matrix" in css/product-catalog.css) — same technique, same
 *           reasons. Below 760px the table is dropped and the same rows fall
 *           back to title + commitment line + role pills, which is why all that
 *           row styling lives outside the desktop block.
 *
 * Retired values still sitting in returning visitors' localStorage all fall
 * back to Card in applyView(): "matrix" (this same view under its first name),
 * "list" (a flat title/pills list that read as redundant next to it),
 * "compact" before that, and "comfortable" before that, which read too close
 * to Card.
 *
 * Nothing here touches opacity or transform on .job-card in a way that fights
 * the job-card-fading / job-card-refresh filter animation above — switching
 * view is a different action from filtering and deliberately doesn't fade.
 */

/* ── Row groundwork: the dense single-column list Table is built on ───────── */

/* !important because the base rule that turns the plugin's container into a
   grid uses it too. */
.awsm-job-wrap[data-view="table"] .awsm-job-listings,
.awsm-job-wrap[data-view="table"] .awsm-grids,
.awsm-job-wrap[data-view="table"] .awsm-lists {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    /* The plugin's own container carries a -15px side margin (its cards used to
       supply a 15px gutter each). In the card grid the cards' 26px padding
       hides it, but a dense row's hairline divider then visibly overhangs the
       "Showing N positions" bar and the filter card above it by 15px on each
       side — and the Software/Fonts lists line up exactly with theirs. */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Belt-and-braces against the flex-basis-on-the-wrong-axis trap (CLAUDE.md):
   a `flex: N Npx` written for a row layout would become a HEIGHT here. */
.awsm-job-wrap[data-view="table"] .awsm-job-listing-item {
    flex: none;
}

/*  Title …………………………………………………………………  [role pills]
 *  COMMITMENT · COMMITMENT
 *
 * This is what a row looks like with the table switched off — i.e. below 760px.
 * On desktop the two right-hand pieces become columns instead (see the group
 * of rules further down that hides them).
 *
 * JUDGMENT CALL: a job card carries more than a product card (role badges, a
 * commitment line, an excerpt, tech-tag pills and a CTA) and there's no 1:1
 * analog to copy. Kept are the two things a person scanning a list of openings
 * uses to decide "is this one for me?" — the role pill(s) and the commitment
 * line, which are also exactly what the table's columns encode. Dropped are the
 * things you'd only read once you're already interested: the excerpt (matching
 * the products' hidden description and the News feed's hidden excerpt) and the
 * tech-tag pills, which are a secondary filter affordance already fully
 * available in the Specialty dropdown above. The CTA goes too — in a dense row
 * the whole row is the button.
 */
.awsm-job-wrap[data-view="table"] .job-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    padding: 10px 12px;
    /* No card at all — just a hairline between rows, exactly like
       .feed[data-view="compact"] .feed-item. */
    border: 0;
    border-bottom: 1px solid var(--job-openings-border);
    border-radius: 0;
    box-shadow: none;
}

.awsm-job-wrap[data-view="table"] .job-card-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
    margin: 0;
}

/* The secondary line under the title. Same small-caps treatment as the filter
   section's field labels, one step darker than the card view's
   --job-openings-text-light so it still reads at 11px against the row. */
.awsm-job-wrap[data-view="table"] .job-card-commitment-text {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--job-openings-text-muted);
}

/* Role pills, right, vertically centred against both title lines. */
.awsm-job-wrap[data-view="table"] .job-card-header {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-bottom: 0;
    min-height: 0;
}

/* Flat pills: a light fill and no border, rather than the card view's outlined
   badge — at this density the outlines add noise beside the row hairlines. */
.awsm-job-wrap[data-view="table"] .job-role-badge {
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 4px;
    border-color: transparent;
    background: var(--job-openings-surface-alt);
    color: var(--job-openings-text-muted);
    /* The pills are plain labels, not controls, but they sit above the
       stretched-link overlay (z-index: 2, so they stay legible). In a card
       that's a small dead patch in the corner; in a dense row they take up most
       of the right-hand half, so a click there did nothing. Let clicks fall
       through to the row link. */
    pointer-events: none;
}

.awsm-job-wrap[data-view="table"] .job-card-excerpt,
.awsm-job-wrap[data-view="table"] .job-tech-tags {
    display: none;
}

/* Hiding the CTA needs care: .job-card-btn::after IS this card's stretched
   link (see the rule further up), so display:none on the button would quietly
   make the whole row unclickable except for the title text itself. Move the
   stretched link onto the title's own <a> instead — setting that anchor back to
   position:static makes its ::after resolve against .job-card (the nearest
   positioned ancestor), restoring the identical full-row hit area with no extra
   markup. NB the title is deliberately NOT truncated with
   `overflow: hidden` + ellipsis the way the News compact row is, precisely
   because that would clip this inset:0 overlay down to the title's own box —
   the same trap feed.css documents. Long titles wrap instead. */
.awsm-job-wrap[data-view="table"] .job-card-btn {
    display: none;
}

.awsm-job-wrap[data-view="table"] .job-card-title a {
    position: static;
}

.awsm-job-wrap[data-view="table"] .job-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* No lift and no shadow — a row highlight instead, matching
   .feed[data-view="compact"] .feed-item:hover. */
.awsm-job-wrap[data-view="table"] .job-card:hover {
    transform: none;
    box-shadow: none;
    border-bottom-color: var(--job-openings-border);
    background: var(--job-openings-surface-alt);
}

/* ── Compact rows on phones ───────────────────────────────────────────────────
 * Below 760px the checkmark table is gone (no room for seven columns), so a
 * compact row is just a title plus ONE supporting line. Everything else the
 * card carries — excerpt, skill tags, the button — stays hidden, which is the
 * whole point of the view.
 *
 * The supporting line is the commitment — "Full Time · Part Time". A
 * Member/Volunteer variant was built behind a third "Roles" view and then
 * removed: Full/Part Time is the more useful line, and "Member" is SIL jargon
 * a first-time visitor cannot read. (Those pills come from the `job-category`
 * taxonomy, labelled "Role" — NOT `remuneration`, which is "Compensation" and
 * holds Salary.)
 */
@media (max-width: 759px) {
    .awsm-job-wrap[data-view="table"] .job-card-excerpt,
    .awsm-job-wrap[data-view="table"] .job-tech-tags,
    .awsm-job-wrap[data-view="table"] .job-card-btn,
    .awsm-job-wrap[data-view="table"] .job-table,
    /* Both supporting lines start hidden and the active variant re-shows one
       below. Without hiding the badges here they stayed visible alongside the
       commitment line, which is the crowding this view is meant to remove. */
    .awsm-job-wrap[data-view="table"] .job-card-header,
    .awsm-job-wrap[data-view="table"] .job-card-commitment-text {
        display: none;
    }

    .awsm-job-wrap[data-view="table"] .job-card {
        position: relative;   /* positioning context for the chevron below */
        display: grid;
        /* One track for the text, one for the chevron — so the chevrons line
           up down the list however long the titles are. */
        grid-template-columns: minmax(0, 1fr) 20px;
        align-items: center;
        gap: 0 12px;
        padding: 14px 0;
    }

    .awsm-job-wrap[data-view="table"] .job-card-title {
        grid-column: 1;
        margin: 0;
        font-size: 17px;
        overflow-wrap: break-word;
    }

    /* The one supporting line: commitment. (A Member/Volunteer variant was
       built behind a third "Roles" view and removed — Full/Part Time is the
       more useful line, and "Member" is SIL jargon a first-time visitor can't
       read.) */
    .awsm-job-wrap[data-view="table"] .job-card-commitment-text {
        display: block;
        grid-column: 1;
        margin-top: 2px;
    }
    /* Navigation, not disclosure: the row goes to the role's own page, so a
       right chevron is the right glyph and a caret/plus would be wrong. It is
       decoration only — the title link already carries the destination and the
       whole row is tappable via .job-card-title a::after — so aria-hidden, and
       no text inside it (CSS ::before/::after content is invisible to
       GTranslate; see CLAUDE.md). */
    /* Absolutely positioned rather than a grid cell: as a cell it was centred
       across the rows it spanned, which is NOT the row's own vertical centre
       once the two text lines have different heights — it sat visibly high.
       50% of the row with a -50% pull is exact whatever the row contains. */
    .awsm-job-wrap[data-view="table"] .job-card::after {
        content: '';
        position: absolute;
        /* 10px, not flush to the edge: the chevron reads as part of the row
           rather than as something stuck to the screen edge. Matches the same
           chevron on the News, Software and Fonts compact rows. */
        right: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
        width: 8px;
        height: 8px;
        /* --job-openings-text-muted is the token this file actually defines
           (:root, top of file). An earlier pass here said --job-openings-muted,
           which exists nowhere, so this one chevron silently used the literal
           fallback and would not have followed the token if it were ever
           retuned — while the 24 other muted usages in this file would. */
        border-right: 2px solid var(--job-openings-text-muted, #64748b);
        border-bottom: 2px solid var(--job-openings-text-muted, #64748b);
        opacity: 0.6;
        pointer-events: none;   /* never intercept the row's own link */
    }
}

/* ── The checkmark table itself ───────────────────────────────────────────────
 * Hidden by default, so Card never pays for the extra markup. Only the desktop
 * block below switches it on — below 759px seven 32px columns plus a title
 * simply don't fit, and the view falls back to the dense row above. Same
 * decision the Software catalog's OS matrix makes.
 */
.job-table,
.job-table-header {
    display: none;
}

@media (min-width: 760px) {

    /* Declared on .job-openings-page, not on .awsm-job-wrap, because the
       "Showing N / View" bar is a SIBLING of the wrap and has to share the
       table's width. js/job-search.js mirrors data-view onto both elements.
       --job-table-count is written onto .job-openings-page by
       wp-job-openings/job-openings-view.php: one number, the count of columns
       PHP actually rendered, so adding or retiring a Role/Commitment term never
       needs a CSS edit. The fallback keeps the file sane on its own. */
    .job-openings-page[data-view="table"] {
        --job-table-cell-size: 32px;
        --job-table-checks-width: calc(var(--job-table-count, 7) * var(--job-table-cell-size));
        /* Fixed trailing checkmark block + one flexible title column: that is
           what makes every row's cells line up down the page even though each
           row is its own independent grid. The title track's `minmax(0, 1fr)`
           min of 0 is load-bearing, not boilerplate — a grid item's automatic
           minimum is its MIN-CONTENT size, so without it a job title longer
           than the space available would push the whole checkmark block right
           and knock that row out of alignment with every other. At 0 the title
           wraps (and overflow-wrap below breaks a single over-long word)
           instead, and the columns hold. */
        --job-table-columns: minmax(0, 1fr) var(--job-table-checks-width);
        /* Narrower than the page, and CENTRED — the table plus its own
           "Showing N / View" toolbar share this width, so the inset reads as
           deliberate rather than as a list that ran out of content on the
           right. One number to tune: chosen so the longest current job title
           clears the checkmark block comfortably. */
        --job-table-width: 800px;
    }

    .awsm-job-wrap[data-view="table"] .awsm-job-listings,
    .awsm-job-wrap[data-view="table"] .awsm-grids,
    .awsm-job-wrap[data-view="table"] .awsm-lists {
        max-width: var(--job-table-width);
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* The "Showing N / View" bar deliberately does NOT share --job-table-width:
       only the listings narrow. Matching it moved the View buttons out from
       under the cursor that had just pressed one — see the same note on
       .software-catalog-wrap in product-catalog.css. The page-level
       [data-view] is still what scopes the custom properties above. */

    /* Role and Commitment are now columns, so the row keeps only the title. */
    .awsm-job-wrap[data-view="table"] .job-card-header,
    .awsm-job-wrap[data-view="table"] .job-card-commitment-text {
        display: none;
    }

    .awsm-job-wrap[data-view="table"] .job-card {
        grid-template-columns: var(--job-table-columns);
        /* The checkmark block runs to the row's right edge instead of stopping
           12px short of it. Without this the header band's right padding shows
           as a narrow tinted strip past the last column, which reads as a
           phantom extra column. */
        padding-right: 0;
    }

    /* A single unbroken over-long word (a URL-ish title) would otherwise set
       the title track's min-content width and defeat the minmax(0, …) above. */
    .awsm-job-wrap[data-view="table"] .job-card-title {
        overflow-wrap: break-word;
    }

    /* A nested fixed grid occupying ONE track of the row grid, rather than
       seven top-level columns: the fixed template guarantees the cells line up
       between the header and every row. */
    .awsm-job-wrap[data-view="table"] .job-card .job-table,
    .awsm-job-wrap[data-view="table"] .job-table-header .job-table {
        display: grid;
        grid-template-columns: repeat(var(--job-table-count, 7), var(--job-table-cell-size));
        /* Full row height, not content height: `stretch` beats .job-card's
           `align-items: center`, and the negative margins cancel its 10px
           vertical padding so the column rules below run edge to edge and MEET
           the row's horizontal hairline. Without this they're short stubs
           floating beside each checkmark — separators rather than a table. */
        align-self: stretch;
        margin-top: -10px;
        /* The extra 1px takes the column rules THROUGH the row's bottom
           hairline rather than stopping on top of it. A descendant's border
           paints over an ancestor's, so each crossing now takes the vertical
           rule's colour — which matters at the 3px dividers, where the lighter
           horizontal hairline used to cut a gap straight through them. */
        margin-bottom: -11px;
        /* Above the row's stretched-link overlay (z-index: 1) so the cells
           actually receive :hover — js/job-search.js needs the mouseenter to
           tint the whole column. The row stays clickable: the same handler
           follows the row's link on click. */
        position: relative;
        z-index: 2;
    }

    .awsm-job-wrap[data-view="table"] .job-table-cell {
        display: flex;
        align-items: center;      /* centres the checkmark in a full-height cell */
        justify-content: center;
        border-left: 1px solid var(--job-openings-border);
    }

    /* The boundary between the row-header column (Position) and the data block.
       Drawn at the same weight as the group divider, not the 1px used between
       columns: label-vs-values is a structural division, and in comparison
       matrices it's the most consistently drawn rule of the lot. The table
       stays open at its outer edges, which is the usual treatment. */
    .awsm-job-wrap[data-view="table"] .job-table-cell:first-child {
        border-left: 3px solid var(--job-openings-border-strong);
    }

    /* The one heavier rule: Role columns end here, Commitment columns begin.
       The grouping is carried by this divider AND by the spanning group
       headings above it, never by the checkmark colors alone. */
    .awsm-job-wrap[data-view="table"] .job-table-cell.is-group-start {
        border-left: 3px solid var(--job-openings-border-strong);
    }

    /* Column hover, set on every same-index cell at once by js/job-search.js —
       CSS can't reach across sibling rows. A cyan wash rather than the rows'
       own gray tint, so a hovered column still reads inside the hovered row. */
    .awsm-job-wrap[data-view="table"] .job-table-cell.is-col-hover {
        background: var(--job-openings-cyan-bg);
    }

    /* Two information colors, one per group, both well past 4.5:1 on white and
       on either hover tint. Never the filter panel's cyan: at this size a cyan
       glyph on white is about 2.3:1, fine for decoration and nowhere near
       enough for a mark that IS the data. */
    .awsm-job-wrap[data-view="table"] .job-table-check {
        font-size: 15px;
        line-height: 1;
    }

    .awsm-job-wrap[data-view="table"] .job-table-check--role {
        color: var(--job-openings-navy);
    }

    .awsm-job-wrap[data-view="table"] .job-table-check--commitment {
        color: var(--job-openings-teal);
    }

    /* ── Sticky column header ────────────────────────────────────────────────
     * A child of the listings container, so it pins to the top of the JOB LIST:
     * it holds while you scroll the list and releases as soon as the last row
     * goes past, instead of floating over the whole page. The site nav scrolls
     * away on desktop, so top: 0 is right; there's nothing fixed above it.
     */
    .awsm-job-wrap[data-view="table"] .job-table-header {
        display: grid;
        grid-template-columns: var(--job-table-columns);
        column-gap: 16px;
        align-items: end;
        /* padding-right: 0 for the same reason as the rows — see the note
           there. This band is tinted, so any padding to the right of the last
           column shows up as a phantom extra column. */
        padding: 10px 0 10px 12px;
        position: sticky;
        top: 0;
        z-index: 3; /* over the rows' table cells (z-index: 2) */
        background: var(--job-openings-surface-alt); /* same tint rows take on hover — reads as a header band */
        border-bottom: 2px solid var(--job-openings-border-strong); /* heavier than the rows' 1px hairline */
    }

    /* Hidden by js/job-search.js when a filter leaves no rows, so the header
       isn't left stranded over an empty list. Author CSS has to beat the UA
       [hidden] rule — see CLAUDE.md. */
    .awsm-job-wrap[data-view="table"] .job-table-header[hidden] {
        display: none;
    }

    /* Row 1: the two group headings, each spanning its own columns (the span
       comes from PHP, so it follows the real term counts). Row 2: the vertical
       per-term labels, and the "Position" heading over the title column. */
    .awsm-job-wrap[data-view="table"] .job-table-groups {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: repeat(var(--job-table-count, 7), var(--job-table-cell-size));
        /* The 6px that used to separate this row from the labels below is now
           padding on .job-table-group itself. As a margin here it broke every
           vertical rule in two: a margin is outside the border box, so the
           group dividers stopped 6px short of the column rules beneath them. */
    }

    .awsm-job-wrap[data-view="table"] .job-table-group {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--job-openings-text-muted);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* Keeps the 6px of air above the column labels, but INSIDE the border
           box, so the dividers run unbroken into the rules below. */
        padding-bottom: 6px;
    }

    /* Continues the heavy rules up through the heading row, so the two groups
       read as two blocks rather than seven loose columns — and so the
       Position/data boundary below runs the full height of the table rather
       than stopping at the headings. */
    .awsm-job-wrap[data-view="table"] .job-table-group {
        border-left: 3px solid var(--job-openings-border-strong);
    }

    /* Labels sit on a common baseline at the bottom of the header rather than
       being centred in it. Centring left a ragged edge at BOTH ends; bottom
       alignment puts the ragged edge at the top, away from the data, and lines
       every label up against the rows it heads — the usual treatment for
       rotated column headers. (The row cells stay centred; this is header-only.) */
    .awsm-job-wrap[data-view="table"] .job-table-header .job-table-cell {
        align-items: flex-end;
    }

    .awsm-job-wrap[data-view="table"] .job-table-header .job-table {
        grid-column: 2;
        grid-row: 2;
        /* Only the bottom margin here: the rules should run down to the
           header's own bottom border, not up through the group headings. */
        margin-top: 0;
        margin-bottom: -10px;
        /* Enough for the longest label ("Volunteer") set vertically, plus a
           little air under the group heading. */
        min-height: 88px;
    }

    /* Bottom-to-top, so seven word labels fit in 32px columns. Bottom-to-top
       rather than top-to-bottom because that's the readable direction for
       rotated Latin text.
       Deliberately NOT the uppercase + letter-spaced treatment the other
       labels on this page use: rotating text already costs you the horizontal
       reading habit, and all-caps then removes the word-shape cue on top of
       that, while tracking meant for horizontal small-caps just pulls the
       letters further apart. Title Case at a slightly larger size restores the
       ascender/descender profile that makes a word recognisable at a glance. */
    .awsm-job-wrap[data-view="table"] .job-table-head {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--job-openings-navy);
        white-space: nowrap;
        margin-bottom: 10px; /* lifts the words clear of the header's bottom rule */
    }

    /* Same small-caps treatment as the filter section's field labels; sits in
       the title column, aligned with the bottom of the header so it reads as
       the column heading for the job titles below. */
    .awsm-job-wrap[data-view="table"] .job-table-header-name {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        justify-self: start;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--job-openings-text-muted);
        white-space: nowrap;
        padding-bottom: 2px;
    }
}

/* ── Phone width (theme's custom 759px breakpoint) ────────────────────────── */
@media (max-width: 759px) {
    /* Toggle reduces to icon-only so the count and both buttons still fit one
       line; each button's aria-label carries the meaning once the visible text
       is gone. */
    .job-view-label,
    .job-view-btn-label {
        display: none;
    }

    .job-view-btn {
        padding: 9px 12px;
    }

    /* A dense row on a phone: title, commitment and pills can't share one line
       at 375px without the title being cut to a few characters — same problem
       .feed[data-view="compact"] hits and solves the same way. Full-width
       wrapping title on top, commitment and pills on their own line below.
       (This is also all Table has at this width: its table is off below 760px,
       see above.) */
    .awsm-job-wrap[data-view="table"] .job-card {
        row-gap: 4px;
        padding: 10px 8px;
        /* The 140px floor is the point of this rule. With a plain
           `minmax(0, 1fr) auto`, a job carrying three role pills lets the auto
           track take its full max-content width and squeezes the commitment
           line down to a ~60px column, which then wraps "Full Time · Part Time
           · Contract" over four ragged lines. Giving the text a minimum forces
           the pills to wrap instead — which they do gracefully, being a
           flex-wrap row — so both sides stay at two lines at worst. */
        grid-template-columns: minmax(140px, 1fr) auto;
    }

    .awsm-job-wrap[data-view="table"] .job-card-title {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .awsm-job-wrap[data-view="table"] .job-card-commitment-text {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

    .awsm-job-wrap[data-view="table"] .job-card-header {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-end;
    }

    /* NB: the 759px block later in this file widens the base grid gap to 32px,
       but it's one specificity point lighter than the [data-view] rules above,
       so the list modes' own gaps still hold on phones. */
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.awsm-jobs-none-container {
    grid-column: 1 / -1;
    padding: 64px 24px;
    text-align: center;
    color: var(--job-openings-text-light);
}

.awsm-jobs-none-container p {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--job-openings-text-light);
    margin: 0;
}

/* ── Responsive: filter bar ───────────────────────────────────────────────── */

/* Tablet (760px – 991px): Keywords full-width on row 1; three dropdowns side-by-side on row 2 */
@media (min-width: 760px) and (max-width: 991px) {
    .job-filter-bar {
        flex-wrap: wrap;
        gap: 14px;
    }

    .job-filter-search {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .job-custom-filters {
        flex: none;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .job-filter-dropdown {
        flex: 1;
        min-width: 0;
    }
}

/* Mobile (< 760px): single-column stack */
@media (max-width: 759px) {
    .job-filter-bar {
        flex-direction: column;
        gap: 14px;
    }

    .job-filter-section {
        margin-bottom: 32px;
    }

    .job-openings-page {
        padding: 32px 0 48px;
    }

    .job-filter-search,
    .job-custom-filters {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .job-custom-filters {
        flex-direction: column;
        gap: 14px;
    }

    .job-filter-dropdown {
        min-width: 0;
        width: 100%;
    }

    .job-openings-header {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 32px;
        margin-bottom: 32px;
    }

    .job-results-bar {
        margin-bottom: 32px;
    }

    .awsm-job-listings,
    .awsm-grids,
    .awsm-lists {
        gap: 32px;
    }

    .job-openings-header-left h1 {
        font-size: 28px;
    }

    .job-openings-badges {
        width: 100%;
    }

    .job-openings-badge {
        width: 100%;
        justify-content: flex-start;
        white-space: normal;
    }
}

/* ── Suppress plugin's default styles that conflict ──────────────────────── */

.awsm-job-wrap .awsm-job-listing-item a.awsm-job-item {
    display: block; /* reset plugin float/inline-block */
}

/* Hide the plugin's filter form elements we don't use */
.awsm-filter-wrap .awsm-filter-item,
.awsm-filter-wrap .awsm-filter-toggle,
.awsm-filter-wrap .awsm-filter-after-form {
    display: none !important;
}

/* Remove plugin margin/padding from the outer wrap */
.awsm-job-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   SINGLE JOB PAGE
   ============================================================================= */

.job-single-page {
    background: var(--job-openings-page-bg);
    scroll-behavior: smooth;
}

/* ── Hero ── */
.job-single-hero {
    background: var(--job-openings-card-bg);
    border-bottom: 1px solid var(--job-openings-border);
    padding: 40px 0 36px;
}
.job-single-title {
    font-size: 40px;
    font-weight: 800;
    color: var(--job-openings-navy);
    margin: 0 0 20px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.job-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
}
.job-single-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--job-openings-text-muted);
}
.job-single-meta-item i {
    color: var(--job-openings-cyan);
    font-size: 14px;
    width: 16px;
    text-align: center;
}

/* ── Body layout ── */
.job-single-row {
    padding-top: 40px;
    padding-bottom: 60px;
}
@media (min-width: 992px) {
    .job-single-row {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
    }
    .job-single-row > [class*="col-"] {
        float: none;
    }
}
.job-single-main {
    padding-right: 40px;
}

/* ── Executive Summary pull-quote ── */
.job-exec-summary {
    border-left: 4px solid var(--job-openings-cyan);
    padding: 4px 0 4px 20px;
    margin-bottom: 40px;
}
.job-exec-summary p {
    font-size: 20px;
    line-height: 1.65;
    font-style: italic;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

/* ── Generic section ── */
.job-section {
    margin-bottom: 40px;
}
.job-sil-about,
.job-training-card {
    margin-bottom: 40px;
}
.job-section-label {
    display: inline-block;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--job-openings-navy);
    border-bottom: 3px solid var(--job-openings-cyan);
    padding-bottom: 3px;
    margin: 0 0 16px;
}
.job-section-label--minor {
    border-bottom-color: var(--job-openings-border);
    color: var(--job-openings-text-muted);
}
.job-section-body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--job-openings-text-muted);
}
.job-section-body p {
    margin: 0 0 12px;
}
.job-section-body p:last-child { margin-bottom: 0; }
.job-section-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.job-section-body:not(.job-section-body--prose) p + ul,
.job-section-body:not(.job-section-body--prose) p + ol {
    margin-top: -4px;
}
.job-section-body--prose ul,
.job-section-body--prose ol {
    padding-left: 20px;
}
.job-section-body ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
    line-height: 1.6;
}
.job-section-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--job-openings-cyan);
    box-shadow: 0 0 6px rgba(0, 173, 239, 0.35);
}
.job-resp-col--minor .job-section-body ul li::before {
    background: var(--job-openings-border);
    box-shadow: none;
}
.job-section-body--italic { font-style: italic; }

/* About SIL Global card */
.job-sil-about .job-section-label {
    border-bottom: none;
}
.job-sil-about {
    background: var(--job-openings-navy-bg);
    border: 1px solid rgba(0, 43, 92, 0.1);
    border-radius: 20px;
    padding: 28px 32px;
}

/* ── Responsibilities two-column grid ── */
.job-responsibilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* ── KSA / Education two-column grid ── */
.job-ksa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.job-ksa-card {
    background: var(--job-openings-card-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.job-ksa-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.job-ksa-card-header i {
    color: var(--job-openings-cyan);
    font-size: 15px;
    width: 18px;
    text-align: center;
}
.job-ksa-card-header h3 {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--job-openings-navy);
    margin: 0;
}

/* ── Training card ── */
.job-training-card {
    background: var(--job-openings-navy-bg);
    border: 1px solid rgba(0, 43, 92, 0.1);
    border-radius: 20px;
    padding: 24px 28px;
}
.job-training-card .job-ksa-card-header i {
    color: var(--job-openings-navy);
}

/* ── Sidebar ── */
.job-single-sidebar { padding-left: 0; }
.job-sidebar-sticky { position: sticky; top: 24px; }

/* ── Apply card ── */
.job-apply-card {
    background: var(--job-openings-card-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 20px;
    padding: 28px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,43,92,0.1);
}
.job-apply-card-icon {
    width: 56px;
    height: 56px;
    background: var(--job-openings-navy);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 14px rgba(0,43,92,0.25);
}
.job-apply-card-icon i { color: #fff; font-size: 22px; }
.job-apply-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--job-openings-navy);
    margin: 0 0 8px;
}
.job-apply-card-desc {
    font-size: 14px;
    color: var(--job-openings-text-muted);
    line-height: 1.5;
    font-weight: 500;
    margin: 0 0 20px;
}
.job-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--job-openings-navy);
    color: #fff !important;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,43,92,0.12);
}
.job-apply-btn:hover {
    box-shadow: 0 8px 28px rgba(0,43,92,0.2);
    transform: translateY(-2px);
    color: #fff !important;
    text-decoration: none !important;
}
/* See .job-card-btn.clicked-link above — same click-flash fix, incl. :visited. */
.job-apply-btn.clicked-link,
.job-apply-btn.clicked-link:visited {
    color: #fff !important;
}

/* ── Full-width application form section ── */
.job-apply-section {
    background: var(--job-openings-page-bg);
    border-top: 1px solid var(--job-openings-border);
    padding: 60px 0;
}
.job-apply-form-card {
    background: var(--job-openings-card-bg);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--job-openings-border);
    box-shadow: 0 4px 24px rgba(0,43,92,0.1);
}
.job-apply-form-header {
    background: var(--job-openings-navy);
    padding: 48px 40px 40px;
    text-align: center;
    position: relative;
}
.job-apply-form-header-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--job-openings-cyan);
}
.job-apply-form-header-icon {
    width: 72px;
    height: 72px;
    background: rgba(255,255,255,0.1);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.job-apply-form-header-icon i {
    color: var(--job-openings-cyan);
    font-size: 28px;
}
.job-apply-form-pretitle {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--job-openings-cyan);
    margin: 0 0 10px;
}
.job-apply-form-title {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.job-apply-form-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 28px;
}
.job-apply-form-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(148, 163, 184, 0.9);
}
.job-apply-form-meta-item i { font-size: 14px; color: var(--job-openings-cyan); }
/* Form body padding */
.job-apply-form-card .awsm-job-form-inner,
.job-apply-form-card > .awsm-application-form {
    padding: 40px;
}

/* ── Bottom apply trigger ── */
.job-apply-trigger {
    padding-top: 40px;
    border-top: 1px solid var(--job-openings-border);
    margin-top: 40px;
}
.job-apply-trigger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--job-openings-navy);
    color: #fff !important;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,43,92,0.12);
}
.job-apply-trigger-btn:hover {
    box-shadow: 0 8px 28px rgba(0,43,92,0.2);
    transform: translateY(-2px);
    color: #fff !important;
    text-decoration: none !important;
}
/* See .job-card-btn.clicked-link above — same click-flash fix, incl. :visited. */
.job-apply-trigger-btn.clicked-link,
.job-apply-trigger-btn.clicked-link:visited {
    color: #fff !important;
}

/* Inline button — for use in page content, e.g. About Our Roles */
.job-btn {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--job-openings-navy);
    color: #fff !important;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,43,92,0.12);
}
.job-btn:hover {
    box-shadow: 0 8px 28px rgba(0,43,92,0.2);
    transform: translateY(-2px);
    color: #fff !important;
    text-decoration: none !important;
}

/* Flatten the plugin's inner wrapper */
.job-apply-form-card .awsm-job-form-inner {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.job-apply-form-card .awsm-job-form-inner h2 { display: none; }

/* blockquote's browser-default top margin (~1em) was stacking on top of the
   form card's own 40px top padding, doubling the gap above this box. */
.awsm-unpaid-role-notice {
    margin-top: 0;
}

/* The label read as smaller/less important than the definition text below it
   (12px vs. the 15px body copy) — bump it to match, letting the existing
   bold/uppercase/letter-spacing carry the "heading" feel instead of size. */
.awsm-unpaid-role-notice .job-apply-success-next-label {
    font-size: 15px;
}

/* Persistent reminder that the rest of the form is locked — hidden once the
   gate checkbox is checked (apply_job_opening.twig JS toggles this class). */
.awsm-unpaid-role-gate-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--job-openings-text-muted);
}
.awsm-unpaid-role-gate-hint i { color: var(--job-openings-link-blue); }
form:not(.awsm-gate-active) .awsm-unpaid-role-gate-hint {
    display: none;
}

/* Unpaid-role gate: everything except the acknowledgment notice is locked out
   until its checkbox is checked (see apply_job_opening.twig JS) — greyed out
   and non-interactive, not just faded, so it reads as clearly disabled rather
   than a subtle style difference.
   NOTE: .awsm-application-form is a class ON the <form> element itself, not a
   wrapper around it — `.awsm-application-form form.awsm-gate-active` (as a
   descendant selector) never matches anything and silently did nothing; the
   plain `form.awsm-gate-active` below is the actual element being toggled. */
form.awsm-gate-active > *:not(.awsm-unpaid-role-notice) {
    pointer-events: none;
    filter: grayscale(1);
    opacity: 0.5;
}
/* !important: needed to beat job-apply-form-card's more specific
   ".awsm-application-form input[type=...]" base background/color rules. */
form.awsm-gate-active input:disabled,
form.awsm-gate-active textarea:disabled {
    background: var(--job-openings-border) !important;
    color: var(--job-openings-text-light) !important;
    cursor: not-allowed;
}
.job-apply-form-card .awsm-application-form .awsm-job-form-group { margin-bottom: 16px; }
.job-apply-form-card .awsm-application-form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--job-openings-text-muted);
    margin-bottom: 6px;
}
.job-apply-form-card .awsm-application-form input[type="text"],
.job-apply-form-card .awsm-application-form input[type="email"],
.job-apply-form-card .awsm-application-form input[type="tel"],
.job-apply-form-card .awsm-application-form input[type="date"],
.job-apply-form-card .awsm-application-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--job-openings-border);
    border-radius: 14px;
    font-size: 15px;
    color: var(--job-openings-text);
    background: rgba(248,250,252,0.5);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.job-apply-form-card .awsm-application-form input:focus,
.job-apply-form-card .awsm-application-form textarea:focus {
    border-color: var(--job-openings-cyan);
    box-shadow: 0 0 0 3px rgba(0,173,239,0.18);
    background: #fff;
}
.job-apply-form-card .awsm-application-form textarea {
    resize: vertical;
    min-height: 130px;
}

/* Input error state */
.job-apply-form-card .awsm-application-form .awsm-job-form-field.awsm-job-form-error,
.job-apply-form-card .awsm-application-form .awsm-job-form-field.awsm-job-form-error:focus {
    border-color: var(--job-openings-error-border);
    background-color: var(--job-openings-error-bg);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}

/* Label turns red when its field has an error — watches the input class, not the
   error div, because jQuery Validate hides (not removes) the div on success */
.job-apply-form-card .awsm-application-form .awsm-job-form-group:has(.awsm-job-form-field.awsm-job-form-error) > label {
    color: var(--job-openings-error);
}

/* Consent container gets rose background when agreement is missing */
.job-apply-form-card .awsm-application-form .awsm-job-inline-group:has(.awsm-job-form-field.awsm-job-form-error) {
    background: var(--job-openings-error-bg);
    border-color: var(--job-openings-error-border);
    flex-wrap: wrap !important;
}

/* Keep label beside the checkbox — flex: 1 prevents it taking full row width */
.job-apply-form-card .awsm-application-form .awsm-job-inline-group:has(.awsm-job-form-field.awsm-job-form-error) > label {
    flex: 1;
    min-width: 0;
}

/* Error div inside consent container sits on its own full-width row */
.job-apply-form-card .awsm-application-form .awsm-job-inline-group div.awsm-job-form-error {
    width: 100%;
    margin-top: 4px;
}

/* File group: jQuery Validate error div is suppressed — the JS drop zone handles it */
.awsm-file-group-enhanced div.awsm-job-form-error {
    display: none !important;
}

/* File upload zone */
.job-apply-form-card .awsm-application-form .awsm-job-file-upload,
.job-apply-form-card .awsm-application-form .awsm-upload-btn,
.job-apply-form-card .awsm-application-form .awsm-jobs-file-upload {
    border: 2px dashed var(--job-openings-border);
    border-radius: 20px;
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(248,250,252,0.5);
}
.job-apply-form-card .awsm-application-form .awsm-job-file-upload:hover,
.job-apply-form-card .awsm-application-form .awsm-upload-btn:hover,
.job-apply-form-card .awsm-application-form .awsm-jobs-file-upload:hover {
    border-color: var(--job-openings-cyan);
    background: #fff;
}

/* Consent checkbox — slightly larger */
.job-apply-form-card .awsm-application-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--job-openings-navy);
    cursor: pointer;
    flex-shrink: 0;
}

/* Submit button */
.job-apply-form-card .awsm-job-form-submit,
.job-apply-form-card .awsm-application-form button[type="submit"],
.job-apply-form-card .awsm-application-form input[type="submit"] {
    width: 100%;
    padding: 18px 24px;
    background: var(--job-openings-navy);
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s, box-shadow 0.25s, transform 0.2s;
    box-shadow: 0 4px 16px rgba(0,43,92,0.18);
}
.job-apply-form-card .awsm-job-form-submit:hover,
.job-apply-form-card .awsm-application-form button[type="submit"]:hover,
.job-apply-form-card .awsm-application-form input[type="submit"]:hover {
    box-shadow: 0 10px 32px rgba(0,43,92,0.28);
    transform: translateY(-2px);
}

/* ── Submit overlay (shown while submitting) ── */
.job-apply-submit-wrap {
    position: relative;
}

/* Covers the input while submitting; shows text + spinner inline */
.job-apply-submit-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--job-openings-navy);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 16px;
    pointer-events: none;
}

.job-apply-submit-wrap.is-submitting .job-apply-submit-overlay {
    display: flex;
}

.job-apply-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jobApplySpinnerRotate 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes jobApplySpinnerRotate {
    to { transform: rotate(360deg); }
}

/* ── Application success screen ── */

.job-apply-success-header {
    background: var(--job-openings-navy);
    border-radius: 20px 20px 0 0;
    padding: 40px 32px 36px;
    text-align: center;
    color: #fff;
}

.job-apply-success-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: var(--job-openings-cyan);
}

.job-apply-success-label {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--job-openings-cyan);
    margin: 0 0 10px;
}

.job-apply-success-title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.job-apply-success-subtitle {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.6;
}

.job-apply-success-subtitle strong {
    color: #fff;
}

.job-apply-success-body {
    padding: 36px 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.job-apply-success-intro {
    font-size: 15px;
    color: var(--job-openings-text-muted);
    text-align: center;
    margin: 0;
    line-height: 1.7;
    max-width: 480px;
}

/* blockquote.info.job-apply-success-next — inherits site blockquote style */
.job-apply-success-next {
    width: 100%;
    margin: 0;
}

.job-apply-success-next-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--job-openings-navy);
    margin: 0 0 12px;
}

.job-apply-success-next-label i {
    color: var(--job-openings-cyan);
    margin-right: 6px;
}

.job-apply-success-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    background: var(--job-openings-navy);
    color: #fff !important;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 4px 16px rgba(0,43,92,0.18);
}

.job-apply-success-btn:hover {
    box-shadow: 0 10px 28px rgba(0,43,92,0.28);
    transform: translateY(-2px);
    color: #fff !important;
}

.job-apply-success-btn span {
    transition: transform 0.2s;
    font-size: 17px;
}

.job-apply-success-btn:hover span {
    transform: translateX(3px);
}

/* ── Quick Specs card ── */
.job-specs-card {
    background: var(--job-openings-page-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 20px;
    padding: 24px;
}
.job-specs-card-label {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--job-openings-navy);
    margin: 0 0 20px;
}
.job-specs-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.job-spec-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.job-spec-icon {
    width: 36px;
    height: 36px;
    background: var(--job-openings-card-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.job-spec-icon i { color: var(--job-openings-cyan); font-size: 14px; }
.job-spec-label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--job-openings-text-light);
    margin: 0 0 2px;
}
.job-spec-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--job-openings-navy);
    margin: 0;
}

/* ── Desktop sidebar: visually show Ready to Join Us above Quick Specs ── */
@media (min-width: 992px) {
    .job-sidebar-sticky { display: flex; flex-direction: column; }
    .job-specs-card { order: 2; }
    .job-apply-card { order: 1; }
}

/* ── Single page responsive ── */
@media (max-width: 991px) {
    .job-single-main { padding-right: 15px; }
    .job-single-sidebar { padding-left: 15px; }
    .job-specs-card { margin-bottom: 20px; }
    .job-single-title { font-size: 32px; }
    .job-apply-trigger { display: none; }
}
@media (max-width: 767px) {
    .job-single-hero { padding: 32px 0 32px; }
    .job-single-title { font-size: 26px; margin-bottom: 14px; }
    .job-single-row { padding-top: 32px; padding-bottom: 40px; }
    .job-single-main { padding-right: 15px; margin-bottom: 0; }
    .job-exec-summary p { font-size: 17px; }
    .job-responsibilities-grid,
    .job-ksa-grid { grid-template-columns: 1fr; gap: 32px; }
    .job-section,
    .job-sil-about,
    .job-training-card,
    .job-specs-card,
    .job-apply-card { margin-bottom: 32px !important; }
    .job-sidebar-sticky { position: static; }
}
@media (max-width: 759px) {
    #content_primary .job-single-row {
        display: flex !important;
        flex-flow: column !important;
    }
    .job-single-main,
    .job-single-sidebar {
        float: none !important;
        width: 100% !important;
    }
}

/* =============================================================================
   APPLY SUB-PAGE  (/jobs/slug/apply/)
   ============================================================================= */

.job-apply-page {
    background: var(--job-openings-page-bg);
    padding: 40px 0 80px;
}


.job-apply-cancel {
    margin-top: 20px;
    text-align: center;
}
.job-apply-cancel-inner {
    padding: 0 48px 40px;
    margin-top: -16px;
    text-align: center;
}
.job-apply-cancel-link {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--job-openings-text-muted);
    text-decoration: none !important;
    transition: color 0.15s;
}
.job-apply-cancel-link:hover {
    color: var(--job-openings-navy);
    text-decoration: none !important;
}

/* Form body padding on the apply page */
.job-apply-page .awsm-job-form-inner {
    padding: 48px;
}

/* ── File drop zone ── */
.awsm-file-group-enhanced {
    position: relative;
}
.awsm-file-drop-zone {
    border: 2px dashed var(--job-openings-border);
    border-radius: 20px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    background: rgba(248,250,252,0.5);
    outline: none;
}
.awsm-file-drop-zone:hover,
.awsm-file-drop-zone:focus,
.awsm-file-drop-zone.is-over {
    border-color: var(--job-openings-cyan);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,173,239,0.12);
}
.awsm-file-drop-icon {
    width: 56px;
    height: 56px;
    background: var(--job-openings-cyan);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: background 0.2s;
}
.awsm-file-drop-icon i { color: #fff; font-size: 22px; }
.awsm-file-drop-zone.has-file .awsm-file-drop-icon { background: var(--job-openings-navy); }
.awsm-file-drop-primary {
    font-size: 14px;
    font-weight: 700;
    color: var(--job-openings-navy);
    margin: 0 0 6px;
}
.awsm-file-drop-hint {
    font-size: 14px;
    color: var(--job-openings-text-light);
    margin: 0;
}
.awsm-file-drop-hint--ok { color: var(--job-openings-cyan) !important; }
.awsm-file-drop-zone.drag-error {
    border-color: var(--job-openings-error-border) !important;
    background: var(--job-openings-error-bg) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}
.awsm-file-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    background: rgba(100, 116, 139, 0.06);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--job-openings-text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.awsm-file-remove-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #dc2626;
}
.awsm-file-drop-icon--error { background: rgba(239, 68, 68, 0.08) !important; }
.awsm-file-drop-icon--error i { color: #ef4444 !important; }
.awsm-file-drop-primary--error { color: #ef4444 !important; }

/* ── Consent card ── */
.job-apply-form-card .awsm-job-inline-group {
    background: var(--job-openings-page-bg);
    border: 1px solid var(--job-openings-border);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex !important;
    flex-direction: row !important;
    /* flex-start + a manual top-margin nudge on the checkbox was tuned to look
       right for two-line labels only — a one-line label (no second line to
       "average against") then reads as visibly misaligned. center works for both. */
    align-items: center;
    gap: 16px;
}
.job-apply-form-card .awsm-job-inline-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--job-openings-navy);
    cursor: pointer;
}
.job-apply-form-card .awsm-job-inline-group label {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.65;
    margin: 0;
    cursor: pointer;
}

/* Asterisk in label — slight visual lift */
.job-apply-form-card .awsm-application-form label span.awsm-job-form-error {
    position: relative;
    top: -0.25em;
}

/* Error message div — integrated style with icon and fade-in */
.job-apply-form-card .awsm-application-form div.awsm-job-form-error {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    color: var(--job-openings-error);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: formErrorFadeIn 0.2s ease both;
}

.job-apply-form-card .awsm-application-form div.awsm-job-form-error::before {
    content: '\f06a'; /* Font Awesome fa-exclamation-circle */
    font-family: 'Font Awesome 6 Free';
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

@keyframes formErrorFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tighter group spacing */
.job-apply-form-card .awsm-application-form .awsm-job-form-group { margin-bottom: 24px; }

@media (max-width: 767px) {
    .job-apply-page { padding: 32px 0 60px; }
    .job-apply-page .awsm-job-form-inner { padding: 24px; }
    .job-apply-form-header { padding: 36px 24px 32px; }
    .job-apply-form-pretitle { font-size: 12px; }
    .job-apply-cancel-inner { padding: 0 24px 32px; }
    .job-apply-form-title { font-size: 24px; }
}

/* The Card icon is an inline SVG while Table/Compact are Font Awesome glyphs,
   so it needs sizing in its own right — font-size does nothing to an <svg>,
   and the 16px box the font icons sit in would stretch it. 15px against its
   15-unit viewBox keeps one unit to one pixel, which is what keeps its edges
   sharp. If you ever change one of those numbers, change both. */
svg.job-view-icon {
    width: 15px;
    height: 15px;
}