/* ============================================================================
   KIBOCAREERS — PUBLIC JOB BOARD
   Listing (/careers), detail (/careers/{slug}) and the shared vacancy card.

   Published to public/vendor/kibocareers by `php artisan module:publish-assets
   kibocareers`. Edit THIS file, never the copy under public/ — that one is
   overwritten on every publish.
   ============================================================================ */

/* ── Design-token bridge ───────────────────────────────────────────────────
   These views were ported from a package written against a different design
   system, so they reference --kw-* tokens that do not exist in TaTEDO. Every
   one of them was resolving to nothing: borders vanished, shadows never
   painted, headings fell back to the body font and the brand colour never
   appeared. Mapping them here fixes that in one place and keeps the ported
   rules readable against upstream.

   Two mappings are deliberate corrections rather than translations:

     --kw-radius / --kw-radius-lg map to TaTEDO's radius tokens, which are 0.
       The originals fell back to 8px/12px, so the careers pages were the only
       rounded surface on an otherwise sharp-cornered site.

     --kw-font-heading maps to --font-head (Sora), the public-page display face,
       not the admin/body Archivo.

   Nothing else in the app defines --kw-*, so :root is safe here.            */
:root {
    --kw-primary:       var(--primary-color);
    --kw-primary-soft:  var(--primary-soft);

    --kw-text:          var(--text-strong);
    --kw-text-muted:    var(--text-default);
    --kw-text-soft:     var(--text-secondary);
    --kw-text-faint:    var(--text-subtle);

    --kw-border:        var(--border-color);
    --kw-border-strong: var(--border-strong);

    --kw-card:          var(--surface-1);
    --kw-surface-muted: var(--surface-3);
    --kw-surface-tint:  var(--primary-soft-2);

    --kw-success:       var(--success-color);
    --kw-danger:        var(--danger-color);
    --kw-warning:       var(--warning-color);
    --kw-warning-soft:  var(--warning-soft);

    --kw-radius:        var(--border-radius);
    --kw-radius-lg:     var(--border-radius-lg);
    --kw-radius-pill:   var(--border-radius-pill);

    --kw-shadow-sm:     var(--shadow-sm);
    --kw-shadow:        var(--shadow-medium);

    --kw-font-heading:  var(--font-head);
    --kw-dur:           220ms;
}

/* ============================================================================
   PAGE HERO
   Both careers pages sit on the site-wide `.page-header` gradient (teal, dot
   texture, wave divider) defined in KiboFrame's section/app.css, the same hero
   News, Publications and Board Members use. Only the careers-specific contents
   are styled here.
   ============================================================================ */

/* KiboFrame's source app.css paints .page-title with `color: var(--surface-0)
   !important` for exactly this dark hero, but the copy published under
   public/vendor/kiboframe predates that line, so the global h1 colour
   (--text-strong) wins and the title renders near-black on teal. That is a
   site-wide problem — /news and /publications have it too — and republishing
   KiboFrame's assets is the real fix. Set it here so the careers pages are
   correct either way; the rule is harmless once the published copy catches up. */
.page-header--careers .page-title {
    color: var(--surface-0);
}

.page-header--careers .vac-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.page-header--careers .lead {
    color: rgba(var(--white-rgb), 0.88);
    max-width: 46rem;
    margin-inline: auto;
}

/* ── Hero stat strip ─────────────────────────────────────────────────────── */

.page-header--careers .hero-stats {
    list-style: none;
    padding: 0;
    margin: 1.5rem auto 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.page-header--careers .hero-stats li {
    text-align: center;
    min-width: 110px;
}
.page-header--careers .hero-stats-num {
    display: block;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent-color);
}
.page-header--careers .hero-stats-label {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
    margin-top: 0.2rem;
}

/* ── Hero keyword search ─────────────────────────────────────────────────── */

.vac-search .input-group { box-shadow: var(--shadow-medium); }
.vac-search .input-group-text {
    background: var(--kw-card);
    border: 0;
    color: var(--kw-text-faint);
}
.vac-search .form-control {
    border: 0;
    padding-block: 0.65rem;
}
.vac-search .form-control:focus { box-shadow: none; }

.btn-search {
    background: var(--accent-color);
    border: 0;
    color: var(--primary-dark-color);
    font-weight: 700;
    padding-inline: 1.4rem;
}
.btn-search:hover {
    background: var(--accent-dark-color);
    color: var(--primary-dark-color);
}
.btn-search-clear {
    background: var(--kw-card);
    border: 0;
    border-left: 1px solid var(--kw-border);
    color: var(--kw-text-faint);
}
.btn-search-clear:hover { color: var(--danger-color); }

/* ── Brand buttons ───────────────────────────────────────────────────────────
   Used by the apply CTA on the detail page and its mobile bar. Amber on teal is
   the site's established call-to-action pairing (see the utility bar's
   dashboard pill).                                                           */
.kw-btn-brand {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: var(--primary-dark-color);
    font-weight: 700;
    transition: background var(--kw-dur) ease,
                border-color var(--kw-dur) ease,
                transform var(--kw-dur) ease;
}
.kw-btn-brand:hover,
.kw-btn-brand:focus {
    background: var(--accent-dark-color);
    border-color: var(--accent-dark-color);
    color: var(--primary-dark-color);
    transform: translateY(-1px);
}

/* ── Vacancy detail hero ─────────────────────────────────────────────────────
   The detail hero holds a logo, badges and a meta list rather than centred
   copy, so it left-aligns and its contents invert for the dark ground.      */
/* Doubled class on purpose. KiboFrame's section/app.css is pushed into the
   `styles` stack by the public layout AFTER this file, so a rule of equal
   specificity there wins on source order — `.page-header { text-align: center }`
   would beat a plain `.page-header--vacancy`. Anything here that overrides an
   app.css rule has to out-specify it rather than rely on coming later. */
.page-header.page-header--vacancy { text-align: left; }

.page-header--vacancy .page-title::after { left: 0; transform: none; }

.page-header--vacancy .vac-hero__logo {
    background: rgba(var(--white-rgb), 0.95);
    border-color: rgba(var(--white-rgb), 0.35);
}

.page-header--vacancy .vac-hero__meta,
.page-header--vacancy .vac-hero__deadline {
    color: rgba(var(--white-rgb), 0.9);
}
.page-header--vacancy .vac-hero__meta i,
.page-header--vacancy .vac-hero__deadline i {
    color: var(--accent-color);
}
/* Urgent deadlines are red on white elsewhere; red on teal does not read, so
   the hero uses amber — the same "look at this" colour as the stat numbers. */
.page-header--vacancy .vac-hero__deadline.is-urgent {
    color: var(--accent-color);
    font-weight: 700;
}

/* Outline badges are bordered in a light grey that disappears on teal. */
.page-header--vacancy .vac-badge--category {
    border-color: rgba(var(--white-rgb), 0.55);
    color: #fff;
}
.page-header--vacancy .vac-badge--category:hover {
    background: rgba(var(--white-rgb), 0.18);
    border-color: #fff;
    color: #fff;
}

@media (max-width: 575.98px) {
    .page-header--careers .hero-stats { gap: 1.25rem; }
    .page-header--careers .hero-stats-num { font-size: 1.45rem; }
}

/* ============================================================================
   VACANCY CARD
   Shared by the listing, the featured strip and the detail page's related
   block, so it lives above both page sections rather than inside either.
   ============================================================================ */

.vac-card {
    position: relative;
    background: var(--kw-card);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    transition: transform var(--kw-dur) ease,
                box-shadow var(--kw-dur) ease,
                border-color var(--kw-dur) ease;
}

/* Only cards laid out side by side stretch to match their row — the featured
   strip and the detail page's "Similar Roles" block. It must NOT be on
   .vac-card itself: in the stacked results list the card's parent is a
   flex-stretched .col-lg-8, so height:100% resolves to the full column height
   for every card and they pile up on each other and the footer. */
.vac-featured [class*="col-"] > .vac-card,
.vac-related [class*="col-"] > .vac-card {
    height: 100%;
}

.vac-card:hover {
    transform: translateY(-2px);
    border-color: var(--kw-primary);
    box-shadow: var(--kw-shadow);
}

/* Keyboard users get the same affordance as the mouse, on the card that
   contains the focused title link. */
.vac-card:focus-within {
    border-color: var(--kw-primary);
    box-shadow: var(--kw-shadow-sm);
}

.vac-card--featured {
    border-color: var(--kw-primary);
    background: linear-gradient(180deg, var(--kw-surface-tint) 0%, var(--kw-card) 60%);
}

.vac-card__ribbon {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: var(--kw-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.18rem 0.55rem;
    border-radius: var(--kw-radius-pill);
}

.vac-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.7rem;
}

.vac-card__logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--kw-radius);
    border: 1px solid var(--kw-border);
    background: var(--kw-surface-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vac-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.vac-card__initials {
    font-family: var(--kw-font-heading);
    font-weight: 800;
    font-size: 1rem;
    color: var(--kw-primary);
}

/* Reserve the ribbon's width so a long title wraps before it rather than under
   it — "★ FEATURED" plus its 0.85rem inset needs about 7rem. */
.vac-card__headtext { min-width: 0; padding-right: 7rem; }
.vac-card:not(.vac-card--featured) .vac-card__headtext { padding-right: 0; }

.vac-card__title {
    font-family: var(--kw-font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.2rem;
}

.vac-card__title a { color: var(--kw-text); text-decoration: none; }
.vac-card__title a:hover { color: var(--kw-primary); }

/* The whole card is the click target, but only the title is the real link —
   so the overlay sits under the badges and the deadline, which are their own
   links or plain text. */
.vac-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.vac-card__badges,
.vac-card__deadline { position: relative; z-index: 2; }

.vac-card__employer {
    margin: 0;
    font-size: 0.82rem;
    color: var(--kw-text-soft);
}
.vac-card__employer i { color: var(--kw-primary); margin-right: 0.2rem; }

.vac-card__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    font-size: 0.78rem;
    color: var(--kw-text-soft);
}
.vac-card__meta li { display: inline-flex; align-items: center; gap: 0.3rem; }
.vac-card__meta i { color: var(--kw-primary); }

.vac-card__salary { font-weight: 700; color: var(--kw-success); }
.vac-card__salary i { color: var(--kw-success) !important; }

.vac-card__summary {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--kw-text-muted);
    margin-bottom: 0.75rem;
}

.vac-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--kw-border);
}

.vac-card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ── Badges ──────────────────────────────────────────────────────────────── */

.vac-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.22rem 0.6rem;
    border-radius: var(--kw-radius-pill);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--kw-dur) ease, color var(--kw-dur) ease;
}

.vac-badge--type {
    background: var(--vac-badge-color, var(--kw-primary));
    color: #fff;
}
.vac-badge--type:hover { color: #fff; opacity: 0.9; }

.vac-badge--category {
    background: transparent;
    border-color: var(--vac-badge-color, var(--kw-border-strong));
    color: var(--vac-badge-color, var(--kw-text-soft));
}
.vac-badge--category:hover {
    background: var(--vac-badge-color, var(--kw-primary));
    border-color: var(--vac-badge-color, var(--kw-primary));
    color: #fff;
}

/* Not a link — it states that the advert carries attachments, it does not
   filter by them, so it gets no hover state. */
.vac-badge--docs {
    background: var(--kw-surface-muted);
    color: var(--kw-text-soft);
}

.vac-card__deadline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kw-text-soft);
}
.vac-card__deadline.is-urgent { color: var(--kw-danger); }

/* Section heading shared by the featured strip and the related-roles block */
.vac-sectionheading {
    font-family: var(--kw-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kw-text);
    margin-bottom: 0.9rem;
}
.vac-sectionheading i { color: var(--kw-primary); }

@media (max-width: 575.98px) {
    .vac-card__headtext { padding-right: 0; }
    .vac-card__ribbon { position: static; display: inline-block; margin-bottom: 0.5rem; }
}

/* ============================================================================
   LISTING  (/careers)
   ============================================================================ */

/* ── Filter bar ──────────────────────────────────────────────────────────── */

.vac-filters {
    background: var(--kw-card);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--kw-shadow-sm);
    margin-bottom: 1.25rem;
}

.vac-filters__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kw-text-faint);
    margin-bottom: 0.25rem;
}

.vac-filters .form-select {
    font-size: 0.86rem;
    border-radius: var(--kw-radius);
    border-color: var(--kw-border);
}
.vac-filters .btn { font-size: 0.86rem; }

.vac-filters__clear {
    border: 1px solid var(--kw-border);
    color: var(--kw-text-soft);
    background: var(--kw-card);
}
.vac-filters__clear:hover {
    border-color: var(--kw-primary);
    color: var(--kw-primary);
}

/* The selects auto-submit, so the bar dims while the next page loads rather
   than looking inert after a click. */
.vac-filters.is-submitting {
    opacity: 0.55;
    pointer-events: none;
}

.vac-featured { margin-bottom: 2rem; }

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

.vac-resultbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.vac-resultbar__count {
    margin: 0;
    font-size: 0.88rem;
    color: var(--kw-text-soft);
}
.vac-resultbar__clear {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kw-primary);
    text-decoration: none;
}
.vac-resultbar__clear:hover { text-decoration: underline; }

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

.vac-empty {
    background: var(--kw-surface-muted);
    border-radius: var(--kw-radius-lg);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--kw-text-soft);
}
.vac-empty i { color: var(--kw-text-faint); }

/* ── Sidebar panels ──────────────────────────────────────────────────────── */

@media (min-width: 992px) {
    .vac-sidebar { position: sticky; top: 90px; }
}

.vac-panel {
    background: var(--kw-card);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--kw-shadow-sm);
}

.vac-panel__title {
    font-family: var(--kw-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--kw-text);
    margin-bottom: 0.85rem;
}
.vac-panel__title i { color: var(--kw-primary); margin-right: 0.25rem; }

.vac-panel--urgent {
    border-left: 4px solid var(--kw-warning);
    background: var(--kw-warning-soft);
}
.vac-panel--urgent .vac-panel__title i { color: var(--kw-warning); }

.vac-panel__list { list-style: none; padding: 0; margin: 0; }
.vac-panel__list li + li {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(var(--ink-rgb), 0.12);
}
.vac-panel__list a {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--kw-text);
    text-decoration: none;
}
.vac-panel__list a:hover { color: var(--kw-primary); }

.vac-panel__meta {
    display: block;
    font-size: 0.75rem;
    color: var(--kw-text-soft);
    margin-top: 0.15rem;
}
.vac-panel__days { color: var(--kw-warning); }

.vac-panel__links { list-style: none; padding: 0; margin: 0; }
.vac-panel__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--kw-text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--kw-border);
}
.vac-panel__links li:last-child a { border-bottom: 0; }
.vac-panel__links a:hover,
.vac-panel__links a.is-active { color: var(--kw-primary); font-weight: 600; }

.vac-panel__count {
    background: var(--kw-surface-muted);
    color: var(--kw-text-soft);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
    border-radius: var(--kw-radius-pill);
}
.vac-panel__links a:hover .vac-panel__count,
.vac-panel__links a.is-active .vac-panel__count {
    background: var(--kw-primary);
    color: #fff;
}

.vac-panel--cta {
    background: var(--kw-surface-tint);
    border-color: transparent;
    font-size: 0.86rem;
    color: var(--kw-text-muted);
}

/* ============================================================================
   DETAIL  (/careers/{slug})
   ============================================================================ */

/* ── Hero ────────────────────────────────────────────────────────────────── */

.vac-hero {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 1rem;
}

.vac-hero__logo {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: var(--kw-radius-lg);
    border: 1px solid var(--kw-border);
    background: var(--kw-card);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vac-hero__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.vac-hero__initials {
    font-family: var(--kw-font-heading);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--kw-primary);
}

.vac-hero__body { min-width: 0; }
.vac-hero__title {
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
    margin-bottom: 0.6rem;
}

.vac-hero__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.4rem;
    font-size: 0.88rem;
    color: var(--kw-text-soft);
}
.vac-hero__meta li { display: inline-flex; align-items: center; gap: 0.35rem; }
.vac-hero__meta i { color: var(--kw-primary); }

.vac-hero__deadline {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kw-text-soft);
}
.vac-hero__deadline.is-urgent { color: var(--kw-danger); }

@media (max-width: 575.98px) {
    .vac-hero { flex-direction: column; gap: 0.85rem; }
    .vac-hero__logo { width: 64px; height: 64px; }
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.vac-detail {
    background: var(--kw-card);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    padding: 1.75rem;
}

.vac-section + .vac-section { margin-top: 1.75rem; }

.vac-section__title {
    font-family: var(--kw-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kw-text);
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--kw-surface-tint);
}

.vac-section__body {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--kw-text-muted);
}
.vac-section__body p { margin-bottom: 1rem; }
.vac-section__body ul,
.vac-section__body ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.vac-section__body li { margin-bottom: 0.4rem; }
.vac-section__body a { color: var(--kw-primary); }
.vac-section__body img { max-width: 100%; height: auto; }

/* Admin-pasted tables are frequently wider than the column — scroll the table,
   never the page. */
.vac-section__body table {
    width: 100%;
    margin-bottom: 1rem;
    display: block;
    overflow-x: auto;
}
.vac-section__body td,
.vac-section__body th {
    border: 1px solid var(--kw-border);
    padding: 0.45rem 0.65rem;
}
.vac-section__body th { background: var(--kw-surface-muted); }

/* ── Attached documents ──────────────────────────────────────────────────── */

.vac-docs__list { list-style: none; margin: 0; padding: 0; }
.vac-docs__list li + li { margin-top: 0.5rem; }

.vac-docs__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius);
    color: var(--kw-text);
    text-decoration: none;
    transition: border-color var(--kw-dur) ease,
                background var(--kw-dur) ease,
                color var(--kw-dur) ease;
}
.vac-docs__item:hover {
    border-color: var(--kw-primary);
    background: var(--kw-surface-tint);
    color: var(--kw-primary);
}
.vac-docs__item i { font-size: 1.35rem; color: var(--kw-primary); }
.vac-docs__name { flex: 1 1 auto; font-weight: 600; }
.vac-docs__meta {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--kw-text-soft);
    white-space: nowrap;
}

/* ── Share row ───────────────────────────────────────────────────────────── */

.vac-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--kw-border);
}
.vac-share__label {
    font-size: 0.85rem;
    color: var(--kw-text-soft);
    margin-right: 0.4rem;
}
.vac-share__btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--kw-border);
    background: var(--kw-card);
    color: var(--kw-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--kw-dur) ease,
                color var(--kw-dur) ease,
                border-color var(--kw-dur) ease;
}
.vac-share__btn:hover {
    background: var(--kw-primary);
    border-color: var(--kw-primary);
    color: #fff;
}
/* Set briefly by careers.js after the link is copied. */
.vac-share__btn.is-copied {
    background: var(--kw-success);
    border-color: var(--kw-success);
    color: #fff;
}

.vac-related { margin-top: 2.5rem; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.vac-panel--apply {
    background: var(--kw-surface-tint);
    border-color: transparent;
}
.vac-apply-btn { font-weight: 700; padding: 0.6rem 1rem; }

.vac-panel__note {
    margin: 0.7rem 0 0;
    font-size: 0.78rem;
    color: var(--kw-text-soft);
}

.vac-apply-fallback {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--kw-text-muted);
    background: var(--kw-card);
    border: 1px dashed var(--kw-border-strong);
    border-radius: var(--kw-radius);
    padding: 0.75rem 0.9rem;
}
.vac-apply-fallback a { color: var(--kw-primary); }

.vac-panel__deadline {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kw-text-soft);
}
.vac-panel__deadline.is-urgent { color: var(--kw-danger); }

.vac-panel--salary { border-left: 4px solid var(--kw-success); }
.vac-salary {
    margin: 0;
    font-family: var(--kw-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kw-success);
}

/* ── Facts list ──────────────────────────────────────────────────────────── */

.vac-facts { margin: 0; font-size: 0.85rem; }
.vac-facts dt {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kw-text-faint);
    margin-top: 0.75rem;
}
.vac-facts dt:first-child { margin-top: 0; }
.vac-facts dd {
    margin: 0.1rem 0 0;
    color: var(--kw-text);
    font-weight: 600;
}
.vac-facts__hint {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--kw-text-soft);
}
.vac-facts__hint.is-urgent { color: var(--kw-danger); }

@media (max-width: 767.98px) {
    .vac-detail { padding: 1.25rem; }
}

/* ── Mobile apply bar ────────────────────────────────────────────────────────
   The apply button lives in a sidebar that drops below a long advert on a
   phone, so on a small screen it is also pinned to the bottom of the viewport.
   Revealed by careers.js once the sidebar button has scrolled out of view, so
   it never covers the real one.                                             */
.vac-applybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: none;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1rem;
    background: var(--kw-card);
    border-top: 1px solid var(--kw-border);
    box-shadow: 0 -4px 16px rgba(var(--ink-rgb), 0.10);
}
.vac-applybar.is-visible { display: flex; }
.vac-applybar__text { min-width: 0; flex: 1 1 auto; }
.vac-applybar__title {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--kw-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vac-applybar__deadline {
    display: block;
    font-size: 0.72rem;
    color: var(--kw-text-soft);
}
.vac-applybar__deadline.is-urgent { color: var(--kw-danger); }
.vac-applybar .btn { flex: 0 0 auto; font-weight: 700; }

@media (min-width: 992px) {
    /* Desktop keeps the sidebar button; the bar never shows. */
    .vac-applybar { display: none !important; }
}

/* ============================================================================
   ACCESSIBILITY + MEDIA
   ============================================================================ */

/* Bootstrap's outline is removed on several of these controls, so give focus
   a visible ring of its own. :focus-visible, so a mouse click does not ring. */
.vac-card__title a:focus-visible,
.vac-badge:focus-visible,
.vac-docs__item:focus-visible,
.vac-share__btn:focus-visible,
.vac-panel__links a:focus-visible,
.vac-panel__list a:focus-visible,
.vac-resultbar__clear:focus-visible {
    outline: 2px solid var(--kw-primary);
    outline-offset: 2px;
    border-radius: var(--kw-radius);
}

@media (prefers-reduced-motion: reduce) {
    .vac-card,
    .vac-badge,
    .vac-docs__item,
    .vac-share__btn {
        transition: none;
    }
    .vac-card:hover { transform: none; }
}

/* ── Print ───────────────────────────────────────────────────────────────────
   A tender's advert gets printed and circulated. Drop the site chrome and the
   interactive furniture, keep the advert, and spell out where the attachments
   live since a printed link is not clickable.                               */
@media print {
    .app-header,
    .utility-bar,
    .app-footer,
    .vac-filters,
    .vac-sidebar,
    .vac-share,
    .vac-related,
    .vac-applybar,
    .vac-card__ribbon {
        display: none !important;
    }

    .vac-detail {
        border: 0;
        padding: 0;
        box-shadow: none;
    }

    .vac-section { break-inside: avoid; }
    .vac-section__title { break-after: avoid; }

    .vac-docs__item {
        border-color: #999;
        color: #000;
    }
    /* Print the URL so a reader of the paper copy can still find the file. */
    .vac-docs__item::after {
        content: ' (' attr(href) ')';
        font-size: 0.7rem;
        color: #555;
        word-break: break-all;
    }

    a { text-decoration: none; color: #000; }
}