/* Careers Page Specific Styles */

.hero-careers {
    background: linear-gradient(0deg, rgba(162,162,162,0.001), rgba(255,255,255,0.67)), 
                url('../static/media/image.c6bb82000986281ca3d9.jpg') center/cover no-repeat;
    min-height: 100vh;
}

@media (max-width: 576px) {
    .hero-careers {
        background: linear-gradient(0deg, rgba(162,162,162,0.001), rgba(255,255,255,0.67)), 
                    url('../static/media/image-mobile.2c9f8842e461c54b2f90.jpg') center/cover no-repeat;
    }
}

.hero-careers .hero-content {
    padding-top: 150px;
}

.hero-caption {
    text-align: right;
    margin-top: var(--spacing-lg);
}

.caption-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

.caption-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.value-card {
    background: white;
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.value-card h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.2rem;
}

.value-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.cta-section {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: white;
    border-radius: 8px;
}

.cta-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.intro-text {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
}

.positions-list {
    display: grid;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.position-card {
    background: white;
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.position-card h3 {
    color: var(--color-primary);
    margin: 0;
    font-size: 1.2rem;
}

.position-meta {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.9rem;
    color: #666;
}

.position-meta span {
    display: flex;
    align-items: center;
}

.position-meta span::before {
    content: '•';
    margin-right: 0.5rem;
    color: var(--color-accent);
}

.position-meta span:first-child::before {
    content: '';
    margin: 0;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-link img {
    width: 16px;
    height: 16px;
}

.apply-section {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: white;
    border-radius: 8px;
}

.apply-section p {
    margin-bottom: var(--spacing-sm);
}

.apply-section a {
    color: var(--color-primary);
    font-weight: 700;
}

@media (max-width: 768px) {
    .hero-caption {
        text-align: center;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .position-card {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* Careers – reconciled layout (live content) */
.careers-intro {
    max-width: 880px;
    margin: 0 auto var(--spacing-xl);
    text-align: center;
}

.careers-intro p,
.why-work p {
    line-height: 1.8;
}

.why-work {
    max-width: 880px;
    margin: 0 auto var(--spacing-xl);
}

.why-work h2 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.opportunities-list {
    margin: var(--spacing-sm) 0 0 1.25rem;
    line-height: 1.9;
}

.position-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.position-card p {
    margin: var(--spacing-sm) 0;
    line-height: 1.7;
    color: var(--color-text-dark);
}

.position-meta {
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    margin-top: 0.25rem;
}

.position-meta .meta-item {
    display: flex;
    align-items: center;
}

.position-meta span::before {
    content: none !important;
    margin: 0 !important;
}

.meta-label {
    font-weight: 700;
    color: var(--color-primary);
    margin-right: 0.35rem;
}

.apply-section .btn {
    margin: var(--spacing-sm) 0;
}

/* ============================================
   CAREERS HERO LAYOUT (match production)
   title left-middle, caption bottom-right
   ============================================ */
.hero-careers {
    display: block;
    align-items: initial;
}

.hero-careers .container {
    position: static;
}

.hero-careers .hero-content {
    position: static;
    padding: 0;
    max-width: none;
}

.hero-careers .hero-title {
    position: absolute;
    top: 40%;
    left: 5%;
    right: auto;
    text-align: left;
    margin: 0;
    z-index: 2;
}

.hero-careers .hero-caption {
    position: absolute;
    bottom: 8%;
    right: 5%;
    text-align: right;
    margin: 0;
    z-index: 2;
}

@media (max-width: 768px) {
    .hero-careers .hero-title,
    .hero-careers .hero-caption {
        position: static;
        text-align: center;
        left: auto;
        right: auto;
    }
    .hero-careers .hero-content {
        padding-top: 120px;
    }
    .hero-careers .hero-caption {
        margin-top: var(--spacing-lg);
    }
}

/* QA correction: nudge careers title/caption to match live vertical positions */
.hero-careers .hero-title { top: 44%; }
.hero-careers .hero-caption { bottom: 5%; }

/* Careers hero: make the outlined word legible over the light/snowy background */
.hero-careers .hero-title .outline {
    color: rgba(44, 62, 99, 0.10);
    -webkit-text-stroke: 3px #2c3e63;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55);
}

/* Admin-only quick edit link on each opening (shown only when logged in) */
.position-card .position-edit {
    display: inline-block;
    margin-left: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #D73F0D;
    text-decoration: none;
    vertical-align: middle;
}
.position-card .position-edit a { color: inherit; text-decoration: none; }
.position-card .position-edit:hover { text-decoration: underline; }

/* Bullet lists inside the editable "Why work" content (ACF wysiwyg) */
.why-work ul {
    margin: var(--spacing-sm) 0 0 1.25rem;
    line-height: 1.9;
}

/* Single job-opening page (single.php) */
.single-section {
    padding: 150px 0 var(--spacing-xl);
    min-height: 100vh;
}
.single-opening {
    max-width: 880px;
    margin: 0 auto;
}
.single-opening .section-title {
    text-align: left;
}
.single-opening .back-link {
    display: inline-block;
    margin-bottom: var(--spacing-md);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}
.single-opening .back-link:hover {
    text-decoration: underline;
}
.single-opening .position-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
    margin: var(--spacing-sm) 0 var(--spacing-md);
}
.single-opening .single-content {
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}
.single-opening .single-apply {
    margin-top: var(--spacing-md);
}

@media (max-width: 768px) {
    .single-section {
        padding: 100px 0 var(--spacing-lg);
    }
}

/* ============================================================
   CAREERS — RECONCILED TO LIVE (measured @1707x842)
     hero title     x181 y388, max-width 400 with nowrap so
                    "SOCIETY" lands at x609
     caption        x1174 y708 w337, right aligned, 19.2/500
                    over a 16/500 second line
     tab            "Join Our Team" as a tab row at y725, exactly
                    like Our Story and the industry tabs
     content        931px column centred at x381, body 16/500
     headings       25.6/500, Title Case, centred
     openings       titles 19.2/600 centred; Location / Employment
                    Type as a 149 + 285 label-value grid at x621
     apply link     17.6/500 centred
   ============================================================ */

/* ---- tab row (same treatment as About and Industries) ---- */
.tabs-section .tab-list {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 0 51px;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 0;
}

.tabs-section .tab-list::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin: 0 auto;
    background: var(--color-accent);
}

.tabs-section .tab-button {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 19.28px 12px;
    border: 0;
    background: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    text-transform: none;
    color: var(--color-accent);
    cursor: default;
    position: relative;
}

@media (min-width: 769px) {
    .tabs-section {
        margin-top: -117px;
    }
}

@media (max-width: 768px) {
    .tabs-section {
        margin-top: 0;
    }

    .tabs-section .tab-list {
        margin-bottom: 4px;
    }

    .tabs-section .tab-list::after {
        display: none;
    }

    .tabs-section .tab-button {
        display: block;
        width: 100%;
        padding: 13.28px 0;
        text-align: left;
        border-bottom: 2px solid var(--color-accent);
    }
}

/* ---- hero ---- */
.hero-careers .hero-title {
    left: 181px;
    right: auto;
    max-width: 400px;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .hero-careers .hero-title {
        top: 388px;
        bottom: auto;
    }

    .hero-caption {
        left: auto;
        right: 181px;
        top: 708px;
        bottom: auto;
        width: 337px;
    }
}

.caption-subtitle {
    font-size: 1rem;
    font-weight: 500;
}

/* ---- content column ---- */
.careers-intro,
.why-work,
.positions-list,
.apply-section {
    max-width: 931px;
    margin-left: auto;
    margin-right: auto;
}

.careers-intro p,
.why-work p,
.apply-section p,
.position-card p {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.why-work h2,
.apply-section .section-title {
    font-size: 1.6rem;
    font-weight: 500;
    text-transform: none;
    text-align: center;
    color: var(--color-primary);
}

.opportunities-list {
    max-width: 899px;
    margin: 0 auto;
    padding-left: 0;
    list-style: none;
}

.opportunities-list li {
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
}

/* ---- openings ---- */
.position-card {
    text-align: center;
}

.position-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: none;
    text-align: center;
    color: var(--color-primary);
}

.position-meta {
    display: grid;
    grid-template-columns: 149px 285px;
    column-gap: 16px;
    row-gap: 3px;
    justify-content: center;
    text-align: left;
}

.meta-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.meta-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-primary);
}

.position-card .btn-link,
.apply-section .btn-primary {
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
}

.position-card .btn-link {
    justify-content: center;
    text-align: center;
}

@media (max-width: 768px) {
    .position-meta {
        grid-template-columns: 1fr;
        row-gap: 0;
        justify-content: start;
    }
}

/* second pass */
.hero-careers .hero-caption {
    left: auto;
    right: 181px;
    top: 708px;
    bottom: auto;
    width: 337px;
}

/* live has no card chrome behind an opening — the block is plain and
   centred, which is also what puts the label/value grid at x621 */
.position-card {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: 0;
}

.position-meta {
    row-gap: 3.4px;
    line-height: 1.6;
    margin: 4px 0 0;
}

.position-meta .meta-label,
.position-meta .meta-value {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* live opens the copy 191px below the tab row */
.careers-intro {
    margin-top: 140px;
}

@media (max-width: 768px) {
    .careers-intro {
        margin-top: var(--spacing-lg);
    }

    .hero-careers .hero-caption {
        position: static;
        width: auto;
        right: auto;
        top: auto;
    }
}

/* third pass */
.caption-title {
    line-height: 1.6;
    margin: 0;
}

.careers-intro {
    margin-top: 191px;
}

.position-card h3 {
    display: block;
    width: 100%;
}

.position-meta {
    width: max-content;
    margin: 4px auto 0;
}

@media (max-width: 768px) {
    .careers-intro {
        margin-top: var(--spacing-lg);
    }

    .position-meta {
        width: auto;
        margin: 4px 0 0;
    }
}

/* fourth pass — kill the leftover card-era decorations and close the
   remaining vertical gaps against live */
.position-meta span::before,
.position-meta span:first-child::before {
    content: none;
    margin: 0;
}

.position-meta .meta-label,
.position-meta .meta-value {
    display: block;
    align-items: initial;
}

.hero-careers .hero-caption {
    display: block;
    gap: 0;
}

.hero-careers .caption-title {
    margin: 0;
    line-height: 1.6;
}

.hero-careers .caption-subtitle {
    margin: 0;
    line-height: 1.6;
}

.opportunities-list {
    max-width: none;
    margin: 0;
    padding-left: 32px;
}

.opportunities-list li {
    line-height: 1.6;
    margin-bottom: 8px;
}

.careers-intro {
    margin-bottom: 48px;
}

/* fifth pass */
.position-meta {
    align-items: start;
    align-content: start;
    grid-auto-rows: min-content;
}

.why-work h2 {
    margin-bottom: 38px;
}

.opportunities-list {
    padding-left: 12px;
}

.opportunities-list li {
    padding-left: 20px;
}

/* live opens the first job 117px below the last bullet */
.positions-list {
    margin-top: 126px;
}

@media (max-width: 768px) {
    .positions-list {
        margin-top: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .tabs-section .tab-button {
        padding: 13.28px 0;
    }
}

/* ============================================================
   CAREERS ON PHONES — MEASURED ON LIVE AT 390px
     caption 14.4/500 over 12.8/500, right aligned
     body copy 12.8/500 left aligned, headings 19.2/500 left
     bullets indented 32px
   ============================================================ */
@media (max-width: 768px) {
    .careers-intro p,
    .why-work p,
    .apply-section p,
    .position-card p,
    .opportunities-list li,
    .meta-label,
    .meta-value {
        font-size: 0.8rem;
        font-weight: 500;
        text-align: left;
    }

    .why-work h2,
    .apply-section .section-title,
    .position-card h3 {
        font-size: 1.2rem;
        font-weight: 500;
        text-align: left;
    }

    .position-card {
        text-align: left;
    }

    .opportunities-list {
        padding-left: 32px;
    }

    .opportunities-list li {
        padding-left: 0;
    }

    .caption-title {
        font-size: 0.9rem;
    }

    .caption-subtitle {
        font-size: 0.8rem;
    }

    .position-card .btn-link,
    .apply-section .btn-primary {
        font-size: 0.9rem;
        justify-content: flex-start;
    }
}

/* live keeps the caption on one line (it overflows left of its box the
   same way the hero title does) and leaves a full 38px under the
   "Why Work" heading — a collapsing paragraph margin was eating 10px */
@media (min-width: 769px) {
    .caption-title {
        white-space: nowrap;
    }
}

.why-work h2 + p,
.why-work p:first-of-type {
    margin-top: 0;
}

.why-work h2,
.apply-section .section-title,
.position-card h3 {
    line-height: 1.6;
}

/* live leaves 7px between an opening's title and its first meta row */
.position-card h3 {
    margin: 0 0 7px;
}

/* live steps the hero type rather than interpolating it: 3rem/1.6rem
   down to 768px, then 2rem/1.2rem */
@media (min-width: 769px) {
    .hero-about .hero-title,
    .hero-industries .hero-title,
    .hero-careers .hero-title {
        font-size: 3rem;
    }

    .hero-about .hero-subtitle,
    .hero-industries .hero-subtitle,
    .hero-careers .hero-subtitle {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .hero-about .hero-title,
    .hero-industries .hero-title,
    .hero-careers .hero-title {
        font-size: 2rem;
    }

    .hero-about .hero-subtitle,
    .hero-industries .hero-subtitle,
    .hero-careers .hero-subtitle {
        font-size: 1.2rem;
    }
}

/* the hero title runs on one line at 48px and is wider than the viewport
   below about 840px; live clips it at the hero rather than letting the
   page scroll sideways */
.hero-careers {
    overflow: hidden;
}

/* the 578-767 tier */
@media (min-width: 578px) and (max-width: 767px) {
    .careers-intro p,
    .why-work p,
    .apply-section p,
    .position-card p,
    .opportunities-list li,
    .meta-label,
    .meta-value {
        font-size: 1rem;
    }

    .why-work h2,
    .apply-section .section-title,
    .position-card h3 {
        font-size: 1.5rem;
    }
}

/* ------------------------------------------------------------------
   Current openings — left aligned  (v13)

   Live centres each opening: the title, the body copy, the Apply link
   and the label/value grid all sit on the column's centre line. NBM
   asked for these left aligned instead, so this block is a deliberate
   departure from live and is kept together here so it can be removed in
   one piece if that decision is ever reversed.

   The label column also grows to fit "Employment Type" rather than
   wrapping it, which live's fixed 149px column does not do.
   ------------------------------------------------------------------ */
.positions-list .position-card,
.positions-list .position-card h3,
.positions-list .position-card p {
    text-align: left;
}

.positions-list .position-meta {
    grid-template-columns: minmax(149px, max-content) minmax(285px, max-content);
    justify-content: start;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 4px 0 0;
}

.positions-list .position-card .btn-link {
    justify-content: flex-start;
    text-align: left;
}

@media (max-width: 768px) {
    .positions-list .position-meta {
        grid-template-columns: 1fr;
        justify-content: start;
    }
}

/* ------------------------------------------------------------------
   Careers hero — positioned from the container, not from the viewport
   (v13)

   Up to v12 the title and the caption were pinned with absolute pixel
   offsets (left:181px, top:388px, right:181px, top:708px). Those are
   the right numbers at 1707px wide and wrong at every other width,
   because live positions both inside the stepped container: the title
   sits on the container's content edge and the caption's right edge
   lands on the opposite content edge. Measured on live, the title's x
   is 15 at 769, 23 at 800, 73 at 900, 15 at 1024, 45 at 1100, 75 at
   1160, 95 at 1200, 28 at 1401, 127 at 1600 and 181 at 1707 — exactly
   what "container content edge" produces, and nothing like a constant.

   Vertically, live centres the title in a viewport-height hero (its
   centre line is at 50% of the hero at every viewport height tested,
   700/800/842/1000) and drops the caption 320px below the title's top.
   ------------------------------------------------------------------ */
.hero-careers {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-careers .container {
    position: relative;
    width: 100%;
}

.hero-careers .hero-content {
    position: static;
    max-width: 400px;
    margin: 0;
    padding: 0;
    text-align: left;
}

.hero-careers .hero-title {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    max-width: 400px;
    margin: 0;
    line-height: 1.36;
    text-align: left;
}

.hero-careers .hero-caption {
    position: absolute;
    top: 320px;
    right: 15px;
    left: auto;
    bottom: auto;
    width: max-content;
    max-width: calc(100% - 30px);
    margin: 0;
    text-align: right;
}

/* live's own breakpoints for this hero are 768 and 576, not 769/577 */
@media (min-width: 768px) {
    .hero-careers .hero-title {
        font-size: 3rem;
        white-space: nowrap;
    }

    .hero-careers .caption-title {
        font-size: 1.2rem;
    }

    .hero-careers .caption-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .hero-careers .hero-title {
        font-size: 2rem;
        white-space: normal;
    }

    .hero-careers .caption-title {
        font-size: 1.1rem;
    }

    .hero-careers .caption-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .hero-careers .caption-title {
        font-size: 0.9rem;
    }

    .hero-careers .caption-subtitle {
        font-size: 0.8rem;
    }
}