/**
==========================================================================
@fileOverview
Careers page styles. Updated to center the "Why Join QueryKey" heading and
align the culture and glance cards with the shared standard card pattern used
on Developers/Contact (radius, border, shadow, alternating accents).
@author
 * QueryKey Cases Web Team
@maintainer
 * Cases Engineering Lead
@usage
Loaded after standard-page.css to allow Careers-specific overrides.
@timestamp
2026-03-22 10:18:00 UTC
========================================================================== */

/* /assets/css/pages/careers.css */

body.p-careers {
    --careers-bg: var(--qk-standard-band-dark);
    --careers-band-pattern: var(--qk-standard-band-pattern);
    --careers-band-divider: var(--qk-standard-band-divider);
    --careers-surface: rgb(18 30 56 / 88%);
    --careers-surface-strong: rgb(15 26 48 / 94%);
    --careers-border: rgb(200 220 255 / 14%);
    --careers-border-strong: rgb(255 255 255 / 22%);
    --careers-text: rgb(230 239 255);
    --careers-text-muted: rgb(174 191 223);
    --careers-heading: #fff;
    --careers-accent: var(--std-accent-orange);
    --careers-link: #fbd38d;
    --careers-card-shadow: 0 24px 52px rgb(5 11 22 / 55%);
    --careers-card-hover-shadow: 0 30px 62px rgb(5 11 22 / 65%);

    background-color: var(--careers-bg);
    background-image: var(--careers-band-pattern);
    background-blend-mode: overlay;
    color: var(--careers-text);
    min-height: 100vh;
    transition: background 0.4s ease, color 0.4s ease;
}

body.light-mode.p-careers {
    --careers-bg: var(--qk-standard-light-canvas);
    --careers-band-pattern: linear-gradient(180deg, rgb(255 255 255 / 55%), rgb(245 249 255 / 74%));
    --careers-band-divider: var(--qk-standard-light-divider);
    --careers-surface: rgb(255 255 255 / 94%);
    --careers-surface-strong: rgb(255 255 255 / 98%);
    --careers-border: rgb(15 23 42 / 12%);
    --careers-border-strong: rgb(15 23 42 / 16%);
    --careers-text: #1f2937;
    --careers-text-muted: #4b5563;
    --careers-heading: #0f172a;
    --careers-accent: var(--std-accent-orange);
    --careers-link: var(--std-accent-blue);
    --careers-card-shadow: 0 25px 45px rgb(15 23 42 / 12%);
    --careers-card-hover-shadow: 0 32px 58px rgb(15 23 42 / 16%);
}

/*
  Careers hero — integrated search variant
  Removes the boxed card look and blends the search into the hero with
  a glassy input, pill radius, and subtle focus ring. This affects only
  Careers by scoping to .p-careers.
*/
.p-careers .hero-landing .hero-search--integrated {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: clamp(1.25rem, 3.5vw, 2rem);
    position: relative;
}

/* Careers keeps a wider hero content lane so the integrated glass search
   shell can contain input + filters + CTA without clipping. */
.p-careers .hero-landing .container {
    width: min(96%, 1280px);
}

/* Clear heavy panel styles from the shared main-search component when integrated */
.p-careers .hero-landing .main-search-component.hero-search--integrated {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* safe here: wrapper only, inner pill handles spacing */
}

/* main-search.css constrains .main-search-container to 700px; override that
   for the integrated careers hero so the glass shell can include all controls. */
.p-careers .hero-landing .hero-search--integrated .main-search-container,
.p-careers .hero-landing .hero-search--integrated .search-form.main-search {
    width: 100%;
    max-width: none;
}

.p-careers .hero-landing .main-search-component.hero-search--integrated::before { display: none; }

.p-careers .hero-landing .hero-search--integrated::after { display: none; }

/* Kicker copy spacing remains comfortable above the input */
.p-careers .hero-landing .hero-search--integrated .main-search-kicker {
    color: rgb(226 234 255 / 82%);
    margin-bottom: clamp(0.85rem, 2.2vw, 1.25rem);
}

/* Search input group: full-width pill with glass background */
.p-careers .hero-landing .hero-search--integrated .search-input-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.6rem;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0.45rem 0.5rem;
    border-radius: 44px;
    background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 4%));
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 12px 36px rgb(6 12 24 / 28%), 0 -10px 24px rgb(255 255 255 / 2%) inset;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    backdrop-filter: saturate(120%) blur(6px);
    box-sizing: border-box;
    overflow: hidden;
}

/* Neutralize shared component hover/focus visuals for the integrated variant */
.p-careers .hero-landing .hero-search--integrated .search-input-group:hover,
.p-careers .hero-landing .hero-search--integrated .search-input-group:focus-within {
    background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 4%));
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 12px 36px rgb(6 12 24 / 28%), 0 -10px 24px rgb(255 255 255 / 2%) inset;
    transform: none;
}

.p-careers .hero-landing .hero-search--integrated .search-input {
    border: none;
    background: transparent;
    color: var(--careers-heading);
    padding: 0 0.5rem;
    font-size: 1.06rem;
    height: 56px;
    flex: 1 1 320px;
    min-width: 0;
}

.p-careers .hero-landing .hero-search--integrated .search-input::placeholder{
    color: rgb(226 234 255 / 70%);
}

.p-careers .hero-landing .hero-search--integrated .search-button{
    border-radius: 999px;
    padding: 0 1.6rem;
    font-weight: 700;
    background: linear-gradient(180deg, var(--careers-accent), #e66a00);
    border: none;
    color: #fff;
    box-shadow: 0 14px 34px rgb(230 106 0 / 26%), 0 2px 0 rgb(255 255 255 / 4%) inset;
    height: 56px;
    min-width: 160px;
    flex: 0 0 auto;
    margin-left: 0;
}

.p-careers .hero-landing .hero-search--integrated .search-button:hover{
    transform: translateY(-1px);
}

/* Search icon alignment and tone */
.p-careers .hero-landing .hero-search--integrated .search-icon{
    margin-left: 0.5rem;
    align-self: center;
    opacity: 0.9;
    fill: currentcolor;
    color: rgb(226 234 255 / 75%);
    flex: 0 0 auto;
}

.p-careers .hero-landing .hero-search--integrated .search-input-group:hover .search-icon,
.p-careers .hero-landing .hero-search--integrated .search-input-group:focus-within .search-icon{
    color: rgb(226 234 255 / 75%);
    fill: currentcolor;
    transform: none;
    filter: none;
}

/* Filters row becomes inline chips under the input; remove top border */
.p-careers .hero-landing .hero-search--integrated .search-meta{
    width: min(100%, 860px);
    margin: clamp(0.75rem, 2vw, 1rem) auto 0;
}

.p-careers .hero-landing .hero-search--integrated .filter-section{
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    background: transparent;
    border-radius: 0;
}

.p-careers .hero-landing .hero-search--integrated .filter-section::before{ display:none; }

.p-careers .hero-landing .hero-search--integrated .filter-bar{
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.p-careers .hero-landing .hero-search--integrated .filter-group{
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 16px;
    padding: 0.35rem 0.6rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-careers .hero-landing .hero-search--integrated .filter-label{
    color: rgb(226 234 255 / 90%);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.82rem;
    margin: 0 0 0.2rem;
}

.p-careers .hero-landing .hero-search--integrated .filter-select{
    background: transparent;
    border: none;
    color: var(--careers-heading);
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    width: auto;
}

/* Remove decorative dropdown arrow from shared component for integrated variant */
.p-careers .hero-landing .hero-search--integrated .filter-select-wrapper::after{
    display: none;
}

/* Inline filters (merged inside search group) */
.p-careers .hero-landing .hero-search--integrated .inline-filters{
    display: flex;
    gap: 0.45rem;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.p-careers .hero-landing .hero-search--integrated .inline-filters .filter-group{
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    padding: 0.2rem 0.35rem;
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 220px;
}

@media (width <= 1220px) {
    .p-careers .hero-landing .hero-search--integrated .search-input-group {
        flex-wrap: wrap;
        border-radius: 28px;
        padding: 0.65rem;
        gap: 0.55rem;
    }

    .p-careers .hero-landing .hero-search--integrated .search-input {
        flex: 1 1 100%;
        min-width: 0;
        height: 54px;
        padding-inline: 0.75rem;
    }

    .p-careers .hero-landing .hero-search--integrated .inline-filters {
        order: 2;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }

    .p-careers .hero-landing .hero-search--integrated .search-button {
        order: 3;
        width: 100%;
        min-width: 0;
        height: 54px;
    }
}

/* Visually hide labels while keeping them for screen readers */
.p-careers .hero-landing .hero-search--integrated .inline-filters .filter-label{
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    border: 0;
}

.p-careers .hero-landing .hero-search--integrated .inline-filters .filter-select{
    background: transparent;
    color: var(--careers-heading);
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tweak native selects within integrated chips */
.p-careers .hero-landing .hero-search--integrated .filter-select-wrapper select{
    background: transparent;
    border: none;
    color: var(--careers-heading);
    width: 100%;
    max-width: 100%;
}

/* Light mode adjustments for integrated search */
body.light-mode.p-careers .hero-landing .hero-search--integrated .search-input-group{
    background: rgb(255 255 255 / 85%);
    border-color: rgb(15 23 42 / 12%);
    box-shadow: 0 14px 28px rgb(15 23 42 / 10%);
}

body.light-mode.p-careers .hero-landing .hero-search--integrated .search-input::placeholder{
    color: #6b7280;
}

body.light-mode.p-careers .hero-landing .hero-search--integrated .filter-group{
    background: #fff;
    border-color: rgb(15 23 42 / 12%);
}

.p-careers a {
    color: var(--careers-link);
}

.p-careers a:hover {
    color: var(--careers-accent);
}

.p-careers .page-main {
    /* Full-bleed section pages should not expose outer main-content gutters. */
    padding: 0;
}

.p-careers .hero-glance {
    margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    max-width: 960px;
}

/* When hero-glance is used inside the culture section we want slightly tighter spacing */
.p-careers .culture-section .hero-glance {
    margin-top: 0.5rem;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    max-width: 1100px;
}

/* Align glance cards to standard card baseline as well */
.p-careers .glance-card,
.p-careers .culture-card {
    background: var(--careers-surface);
    border: 2px solid var(--careers-border);
    border-radius: 24px;
    background-clip: padding-box; /* ensure rounded fill matches border */
    padding: 1.75rem;
    text-align: left;
    box-shadow: var(--std-card-shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.p-careers .glance-card:nth-child(odd),
.p-careers .culture-card:nth-child(odd) {
    border-color: rgb(var(--qk-accent-orange-rgb) / 45%);
    box-shadow: 0 22px 44px rgb(var(--qk-accent-orange-rgb) / 20%), var(--std-card-shadow);
}

.p-careers .glance-card:nth-child(even),
.p-careers .culture-card:nth-child(even) {
    border-color: rgb(var(--qk-accent-blue-rgb) / 38%);
    box-shadow: 0 22px 44px rgb(var(--qk-accent-blue-rgb) / 18%), var(--std-card-shadow);
}

.p-careers .glance-card:hover,
.p-careers .culture-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgb(6 12 24 / 45%);
}

.p-careers .glance-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--careers-heading);
    margin-bottom: 0.5rem;
}

/* Alternate glance title color opposite the card border accent */
.p-careers .glance-card:nth-child(odd) .glance-value {
    color: var(--std-accent-blue);
}

.p-careers .glance-card:nth-child(even) .glance-value {
    color: var(--std-accent-orange);
}

.p-careers .glance-label {
    display: block;
    font-size: 0.95rem;
    color: var(--careers-text-muted);
}

/* Center the section title to mirror standard-page sections */
.p-careers .section-title {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 700;
    color: var(--careers-accent);
    margin: 0 0 clamp(1.25rem, 2.6vw, 2rem);
    text-align: center;
}

.p-careers .results-section .section-title {
    margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}

.p-careers #careersOpenRolesHeading {
    color: var(--std-accent-blue);
}

.p-careers .main-search-kicker {
    font-size: 1rem;
    color: var(--careers-text-muted);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.6;
}

/* Keep the non-accent hero title segment bright against the dark careers hero. */
.p-careers .hero-landing h1,
.p-careers .hero-landing .hero-title {
    color: #fff;
}

.p-careers .hero-landing .page-hero-description {
    color: rgb(236 244 255 / 96%);
    text-shadow: 0 8px 26px rgb(5 12 24 / 32%);
}

:is(body.light-mode.p-careers, html.light-mode body.p-careers, body.p-careers[data-theme='light'], html[data-theme='light'] body.p-careers) .hero-landing .page-hero-description {
    color: rgb(236 244 255 / 96%);
}

    /* Careers hero brand split: Query in orange, Key in blue. */
    .p-careers .hero-title .querykey-wordmark--careers-hero .querykey-wordmark__lead {
        color: var(--std-accent-orange);
    }

    .p-careers .hero-title .querykey-wordmark--careers-hero .querykey-wordmark__rest {
        color: var(--std-accent-blue);
    }

.p-careers .search-meta {
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.p-careers .search-meta .filter-section {
    border-top: 1px solid rgb(255 255 255 / 8%);
    padding-top: clamp(1rem, 2vw, 1.5rem);
}

.p-careers .filter-section {
    position: relative;
}

.p-careers .filter-select-wrapper select {
    background: var(--careers-surface);
    border: 1px solid var(--careers-border);
    color: var(--careers-heading);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.p-careers .filter-select-wrapper select:focus {
    border-color: var(--careers-accent);
    box-shadow: 0 0 0 3px rgb(var(--qk-accent-orange-rgb) / 25%);
    outline: none;
}

body.light-mode.p-careers .filter-select-wrapper select {
    background: var(--careers-surface-strong);
    color: var(--careers-text);
}

.p-careers .culture-section {
    background-color: var(--qk-standard-band-dark);
    background-image: var(--careers-band-pattern);
    background-blend-mode: overlay;
    border-top: 1px solid var(--careers-band-divider);
    padding: clamp(2.75rem, 5.5vw, 4rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

/* Constrain and center like the standard section container rhythm */
.p-careers .culture-section .container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3vw, 1.5rem);
    padding-right: clamp(1rem, 3vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 3vw, 2.5rem);
}

.p-careers .culture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1.5rem, 2.5vw, 2rem);
}

/* Keep alternation continuous across rows: hero-glance ends on odd,
   so culture-grid starts on the opposite tone. */
.p-careers .culture-grid .glance-card:nth-child(odd) {
    border-color: rgb(var(--qk-accent-blue-rgb) / 38%);
    box-shadow: 0 22px 44px rgb(var(--qk-accent-blue-rgb) / 18%), var(--std-card-shadow);
}

.p-careers .culture-grid .glance-card:nth-child(even) {
    border-color: rgb(var(--qk-accent-orange-rgb) / 45%);
    box-shadow: 0 22px 44px rgb(var(--qk-accent-orange-rgb) / 20%), var(--std-card-shadow);
}

.p-careers .culture-grid .glance-card:nth-child(odd) .glance-value {
    color: var(--std-accent-orange);
}

.p-careers .culture-grid .glance-card:nth-child(even) .glance-value {
    color: var(--std-accent-blue);
}

/* Note: culture cards now fully inherit from the glance card rules above */

.p-careers .culture-eyebrow {
    /* Hide the eyebrow to match the glance card look */
    display: none;
}

.p-careers .culture-card h3 {
    /* Match .glance-value scale and spacing */
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--careers-heading);
}

/* Alternate culture card title colors opposite their border tone */
.p-careers .culture-card:nth-child(odd) h3 {
    color: var(--std-accent-blue);
}

.p-careers .culture-card:nth-child(even) h3 {
    color: var(--std-accent-orange);
}

.p-careers .culture-card p {
    margin: 0;
    color: var(--careers-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.p-careers .results-section {
    background-color: var(--qk-standard-band-mid);
    background-image: var(--careers-band-pattern);
    background-blend-mode: overlay;
    border-top: 1px solid var(--careers-band-divider);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem);
}

body.light-mode.p-careers .culture-section {
    background-color: var(--qk-standard-light-band);
    background-blend-mode: normal;
}

body.light-mode.p-careers .results-section {
    background-color: var(--qk-standard-light-surface);
    background-blend-mode: normal;
}

.p-careers .results-container {
    width: min(1120px, 92%);
    margin: 0 auto;
}

.p-careers .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: var(--careers-text-muted);
}

.p-careers .loading-indicator {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 4px solid rgb(255 255 255 / 18%);
    border-top-color: var(--careers-accent);
    animation: spin 1.1s linear infinite;
}

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

.p-careers .job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.p-careers .job-card {
    position: relative;
    background: var(--careers-surface);
    border: 2px solid var(--careers-border);
    border-radius: 22px;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    box-shadow: var(--careers-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.p-careers .job-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, rgb(var(--qk-accent-blue-rgb) / 18%), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.p-careers .job-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--careers-card-hover-shadow);
    border-color: var(--careers-border-strong);
}

.p-careers .job-card:hover::after {
    opacity: 1;
}

.p-careers .job-card h3 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--careers-heading);
    line-height: 1.35;
}

/* Match shared opposite-accent convention for card borders and titles. */
.p-careers .job-card:nth-child(odd) h3 {
    color: var(--std-accent-blue);
}

.p-careers .job-card:nth-child(even) h3 {
    color: var(--std-accent-orange);
}

.p-careers .job-excerpt {
    margin: 0;
    color: var(--careers-text-muted);
    line-height: 1.65;
}

.p-careers .job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.p-careers .job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgb(var(--qk-accent-blue-rgb) / 16%);
    color: var(--careers-heading);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.p-careers .job-meta .job-location {
    background: rgb(var(--qk-accent-orange-rgb) / 18%);
}

.p-careers .job-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
}

.p-careers .job-footer .job-type {
    color: var(--careers-text-muted);
}

.p-careers .job-footer .read-more-btn {
    color: var(--careers-accent);
    font-weight: 600;
}

.p-careers .empty-state {
    text-align: center;
    padding: clamp(3rem, 6vw, 4.5rem) 1rem;
    background: var(--careers-surface);
    border: 1px solid var(--careers-border);
    border-radius: 22px;
    box-shadow: 0 22px 48px rgb(5 11 22 / 45%);
    color: var(--careers-text-muted);
}

.p-careers .is-hidden {
    display: none !important;
}

/* Hide dormant hero-actions container on Careers (moved actions elsewhere) */
.p-careers .hero-actions {
    display: none;
}

@media (width <= 768px) {
    .p-careers .hero-glance {
        grid-template-columns: 1fr;
    }

    .p-careers .culture-grid {
        grid-template-columns: 1fr;
    }

    .p-careers .job-grid {
        grid-template-columns: 1fr;
    }

    .p-careers .job-footer {
        flex-direction: column;
        align-items: flex-start;
    }

}

.p-careers .job-card:nth-child(odd) {
    border-color: rgb(var(--qk-accent-orange-rgb) / 48%);
    box-shadow: 0 30px 60px rgb(var(--qk-accent-orange-rgb) / 20%), var(--careers-card-shadow);
}

.p-careers .job-card:nth-child(even) {
    border-color: rgb(var(--qk-accent-blue-rgb) / 45%);
    box-shadow: 0 30px 60px rgb(var(--qk-accent-blue-rgb) / 18%), var(--careers-card-shadow);
}

/* Mobile: keep integrated search visuals consistent (avoid base component overrides) */
@media (width <= 500px) {
    .p-careers .hero-landing .hero-search--integrated .search-input-group{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.6rem;
        border-radius: 24px;
        background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 4%));
        border: 1px solid rgb(255 255 255 / 12%);
        box-shadow: 0 12px 36px rgb(6 12 24 / 28%), 0 -10px 24px rgb(255 255 255 / 2%) inset;
        transform: none;
    }

    .p-careers .hero-landing .hero-search--integrated .search-input{
        width: 100%;
        height: 52px;
        background: transparent;
        color: var(--careers-heading);
        border: none;
        flex: 0 0 auto;
    }

    .p-careers .hero-landing .hero-search--integrated .search-button{
        width: 100%;
        height: 52px;
    }

    .p-careers .hero-landing .hero-search--integrated .search-icon{
        display: none;
    }
}

/* Hide the integrated search UI completely on Careers while preserving DOM for logic */
.p-careers .hero-landing .main-search-component.hero-search--integrated[hidden] {
    display: none !important;
}

/* -------------------------------------------------------------------------
   Inline Alerts
   ------------------------------------------------------------------------- */

.careers-inline-alert {
    margin-bottom: 1.25rem;
    padding: 0.95rem 1.2rem;
    border-radius: 18px;
    border: 1px solid rgb(255 255 255 / 18%);
    background: linear-gradient(180deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 8%));
    color: rgb(235 242 255 / 92%);
    font-size: 0.98rem;
    box-shadow: 0 14px 40px rgb(5 11 24 / 25%);
}

.careers-inline-alert p {
    margin: 0;
}

body.light-mode.p-careers .careers-inline-alert {
    border-color: rgb(15 23 42 / 12%);
    background: rgb(255 255 255 / 94%);
    color: var(--careers-text);
    box-shadow: 0 18px 44px rgb(15 23 42 / 16%);
}

/* -------------------------------------------------------------------------
   Job Overlay
   ------------------------------------------------------------------------- */

body.careers-overlay-open {
    overflow: hidden;
}

.careers-overlay {
    --careers-overlay-accent-rgb: var(--qk-accent-orange-rgb);
    --careers-overlay-accent: var(--std-accent-orange);
    --careers-overlay-opposite-rgb: var(--qk-accent-blue-rgb);
    --careers-overlay-opposite: var(--std-accent-blue);
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 2.5vw, 3rem);
    pointer-events: none;
    z-index: 4100;
}

.careers-overlay.is-active {
    display: flex;
    pointer-events: auto;
}

.careers-overlay.careers-overlay--accent-blue {
    --careers-overlay-accent-rgb: var(--qk-accent-blue-rgb);
    --careers-overlay-accent: var(--std-accent-blue);
    --careers-overlay-opposite-rgb: var(--qk-accent-orange-rgb);
    --careers-overlay-opposite: var(--std-accent-orange);
}

.careers-overlay.careers-overlay--accent-orange {
    --careers-overlay-accent-rgb: var(--qk-accent-orange-rgb);
    --careers-overlay-accent: var(--std-accent-orange);
    --careers-overlay-opposite-rgb: var(--qk-accent-blue-rgb);
    --careers-overlay-opposite: var(--std-accent-blue);
}

.careers-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgb(8 14 28 / 72%), rgb(6 12 22 / 88%));
    -webkit-backdrop-filter: saturate(130%) blur(14px);
    backdrop-filter: saturate(130%) blur(14px);
}

body.light-mode.p-careers .careers-overlay__backdrop {
    background: linear-gradient(160deg, rgb(214 224 241 / 70%), rgb(192 206 229 / 78%));
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: saturate(118%) blur(12px);
    backdrop-filter: saturate(118%) blur(12px);
}

body.light-mode.p-careers .careers-overlay__panel {
    background: linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(247 250 255 / 97%));
    border-color: rgb(15 23 42 / 10%);
    box-shadow: 0 36px 95px rgb(15 23 42 / 18%), 0 0 0 1px rgb(255 255 255 / 72%) inset;
}

.careers-overlay__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    max-height: min(90vh, 1080px);
    min-height: 0;
    padding: clamp(1.6rem, 2vw, 2.4rem);
    border-radius: 28px;
    background: linear-gradient(180deg, rgb(21 36 66 / 96%), rgb(11 21 41 / 97%));
    border: 2px solid rgb(var(--careers-overlay-accent-rgb) / 52%);
    box-shadow:
        0 40px 120px rgb(5 9 18 / 58%),
        0 0 0 1px rgb(var(--careers-overlay-opposite-rgb) / 22%) inset,
        0 0 0 1px rgb(var(--careers-overlay-accent-rgb) / 20%);
    overflow: hidden;
    pointer-events: auto;
}

.careers-overlay__header {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 0.6rem;
    padding-right: 3.4rem;
    background: inherit;
    z-index: 2;
    border-bottom: 2px solid rgb(var(--careers-overlay-accent-rgb) / 34%);
}

body.light-mode.p-careers .careers-overlay__header {
    background: linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(248 251 255 / 96%));
}

body.light-mode.p-careers .careers-overlay__header {
    border-bottom-color: rgb(var(--careers-overlay-accent-rgb) / 26%);
}

.careers-overlay__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 18%);
    background: linear-gradient(180deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 8%));
    color: rgb(234 242 255 / 90%);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.18s ease, border 0.18s ease, background 0.18s ease;
}

.careers-overlay__back:hover,
.careers-overlay__back:focus-visible {
    transform: translateY(-1px);
    border-color: rgb(255 255 255 / 30%);
    background: linear-gradient(180deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 12%));
    outline: none;
}

.careers-overlay__close {
    position: absolute;
    top: 0.9rem;
    right: 1.1rem;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgb(var(--careers-overlay-accent-rgb) / 55%);
    background: radial-gradient(circle at 30% 20%, rgb(var(--careers-overlay-opposite-rgb) / 30%), transparent 60%),
        linear-gradient(145deg, rgb(var(--careers-overlay-accent-rgb) / 44%), rgb(var(--careers-overlay-accent-rgb) / 18%));
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 24px rgb(var(--careers-overlay-accent-rgb) / 34%);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.careers-overlay__close:hover,
.careers-overlay__close:focus-visible {
    transform: translateY(-1px);
    border-color: rgb(var(--careers-overlay-accent-rgb) / 75%);
    box-shadow: 0 16px 30px rgb(var(--careers-overlay-accent-rgb) / 46%);
    outline: none;
}

body.light-mode.p-careers .careers-overlay__close {
    color: var(--careers-heading);
    border-color: rgb(var(--careers-overlay-accent-rgb) / 45%);
    background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(var(--careers-overlay-accent-rgb) / 16%));
    box-shadow: 0 12px 24px rgb(15 23 42 / 16%);
}

body.light-mode.p-careers .careers-overlay__back {
    border-color: rgb(15 23 42 / 12%);
    background: linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 78%));
    color: var(--careers-heading);
}

body.light-mode.p-careers .careers-overlay__back:hover,
body.light-mode.p-careers .careers-overlay__back:focus-visible {
    border-color: rgb(15 23 42 / 20%);
}

.careers-overlay__chip {
    width: fit-content;
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgb(255 255 255 / 15%);
    color: rgb(236 244 255 / 88%);
}

body.light-mode.p-careers .careers-overlay__chip {
    background: rgb(15 23 42 / 10%);
    color: var(--careers-heading);
}

.careers-overlay__title {
    font-size: clamp(2.1rem, 3vw, 2.85rem);
    line-height: 1.12;
    color: var(--careers-overlay-opposite);
    margin: 0;
    text-shadow: 0 0 18px rgb(var(--careers-overlay-accent-rgb) / 18%);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .careers-overlay__title {
        background: linear-gradient(90deg, var(--careers-overlay-opposite), var(--careers-overlay-accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

body.light-mode.p-careers .careers-overlay__title {
    color: rgb(15 23 42 / 96%);
}

.careers-overlay__meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.98rem;
    color: rgb(214 225 245 / 85%);
    flex-wrap: wrap;
}

body.light-mode.p-careers .careers-overlay__meta {
    color: rgb(71 85 105 / 90%);
}

.careers-overlay__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.careers-overlay__separator {
    opacity: 0.45;
}

.careers-overlay__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.35rem;
    margin-top: 0.75rem;
    color: var(--careers-text);
    line-height: 1.72;
}

.careers-overlay__section {
    margin-bottom: 1.4rem;
}

.careers-overlay__body h3 {
    color: var(--careers-overlay-opposite);
    margin-top: 1.6rem;
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    border-left: 4px solid rgb(var(--careers-overlay-accent-rgb) / 72%);
    padding-left: 0.55rem;
}

body.light-mode.p-careers .careers-overlay__body h3 {
    border-left-color: rgb(var(--careers-overlay-accent-rgb) / 64%);
}

.careers-overlay__section:nth-of-type(even) h3 {
    color: var(--careers-overlay-accent);
    border-left-color: rgb(var(--careers-overlay-opposite-rgb) / 68%);
}

.careers-overlay__body p {
    margin-bottom: 1rem;
}

.careers-overlay__intro {
    font-size: 1.05rem;
    color: var(--careers-text-muted);
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 2px solid rgb(var(--careers-overlay-accent-rgb) / 34%);
    background: linear-gradient(180deg, rgb(var(--careers-overlay-accent-rgb) / 16%), rgb(255 255 255 / 4%));
}

body.light-mode.p-careers .careers-overlay__intro {
    border-color: rgb(var(--careers-overlay-accent-rgb) / 28%);
    background: linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(245 249 255 / 98%));
}

.careers-overlay__body ul {
    margin: 0 0 1.1rem 1.2rem;
    padding: 0;
}

.careers-overlay__body li {
    margin-bottom: 0.55rem;
    color: var(--careers-text);
}

.careers-overlay__body li::marker {
    color: rgb(var(--careers-overlay-accent-rgb) / 88%);
}

body.light-mode.p-careers .careers-overlay__body li::marker {
    color: rgb(var(--careers-overlay-accent-rgb) / 82%);
}

.careers-overlay__footer {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 2px solid rgb(var(--careers-overlay-accent-rgb) / 30%);
    padding-top: 0.9rem;
}

body.light-mode.p-careers .careers-overlay__footer {
    border-top-color: rgb(var(--careers-overlay-accent-rgb) / 24%);
}

.careers-overlay__note {
    color: rgb(224 234 255 / 88%);
    margin: 0;
}

body.light-mode.p-careers .careers-overlay__note {
    color: rgb(71 85 105 / 85%);
}

.careers-overlay__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.55rem 1.35rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--careers-overlay-accent), rgb(var(--careers-overlay-accent-rgb) / 74%));
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    box-shadow: 0 18px 40px rgb(var(--careers-overlay-accent-rgb) / 28%);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.careers-overlay__cta:hover,
.careers-overlay__cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 22px 46px rgb(var(--careers-overlay-accent-rgb) / 34%);
    filter: saturate(105%);
    color: #fff;
    outline: none;
}

body.light-mode.p-careers .careers-overlay__cta {
    box-shadow: 0 18px 40px rgb(var(--careers-overlay-accent-rgb) / 22%);
}

@media (width <= 900px) {
    .careers-overlay {
        padding: 1.25rem;
    }

    .careers-overlay__panel {
        border-radius: 22px;
        padding: 1.5rem;
    }

    .careers-overlay__body {
        padding-right: 0;
    }
}

@media (width <= 640px) {
    .careers-overlay__panel {
        border-radius: 18px;
    }

    .careers-overlay__title {
        font-size: 2rem;
    }

    .careers-overlay__meta {
        gap: 0.4rem;
    }
}