/* Single-job page hero — giant "!" background decoration in the top-right
   corner, matching the Figma screenshot. Purely decorative, non-editable
   glyph rendered via `content` — Tailwind has no content-generation utility,
   so this is a CSS-only exception per CLAUDE.md.

   Mirrors modules/hero/style.css's own giant "!" exactly — same fixed
   1600px font-size inside an explicit width/height box, centered via
   flex/align-items, same 5deg rotation — with only the anchor corner
   flipped (top/right here vs bottom/left in hero) to bleed off the
   opposite corner of this section. The about-intro card decoration
   (font-size: 260px) is NOT the right reference here — that one lives
   inside a small contained quote card, not a full-bleed hero section.
   Hidden below `lg`, where there's no room for it. */
.job-details-hero::before {
    content: '!';
    position: absolute;
    z-index: 1;
    bottom: -20vh;
    right: 0;
    width: 26.52vw;
    height: 1600px;
    display: flex;
    align-items: center;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 1600px;
    font-weight: 800;
    line-height: 1;
    color: #0C2C68;
    transform: rotate(8deg);
    pointer-events: none;
}

@media (max-width: 1023px) {
    .job-details-hero::before {
        display: none;
    }
}

/* Job Details content sections (components/job-details-content.php,
   .job-details-content__body) — bullet lists come from the WYSIWYG editor
   as plain <ul>/<li> markup, so there's no element to hang a Tailwind class
   on. Tailwind's preflight also resets `ul { list-style: none }`, and a
   pink dot bullet needs a `::before` pseudo-element Tailwind can't generate
   — CSS-only exception per CLAUDE.md ("global resets that target generated
   markup"). Reproduces the same pink-dot bullet look used elsewhere in the
   theme (e.g. components/accordion.php's icon). */
.job-details-content__body ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.job-details-content__body li {
    position: relative;
    padding-left: 1.5rem;
}

.job-details-content__body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background-color: var(--color-pink, #FF1749);
}