/* ============================================================
   Slide-over job panel for careers.html. Pure UI chrome: opening a
   job loads job.html into the iframe below (a fresh page load each
   time -- see assets/js/job-panel.js), so the apply form and its
   CV auto-fill keep their normal one-load-per-job lifecycle
   untouched. careers.html's own listing markup/behaviour is
   unchanged; this only adds the panel on top of it.
   Same architecture as PowerVacMEP's job-panel.css (EC is light-theme
   like PowerVacMEP, so the colors needed no change); Wix Madefor
   Display instead of Inter, EC's own sitewide font.
   ============================================================ */

/* Stacking + background lock + blur while the panel is open.
   Raised to the two highest z-index values the spec allows (2147483647 is
   the max 32-bit signed int every engine clamps to) so the panel and its
   backdrop stay on top of this page's own fixed-position header (.site-header,
   z-index: 1000 or similar) and any floating widgets, not a number nudged
   just above today's highest. */
#job-panel-backdrop {
    position: fixed; inset: 0;
    background: rgba(21, 24, 28, .5);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease;
    z-index: 2147483646;
}
#job-panel-backdrop.is-open {
    opacity: 1; pointer-events: auto;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

#job-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(960px, 94vw);
    background: #f6f7f9;
    box-shadow: -24px 0 60px -20px rgba(20, 20, 20, .35);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    z-index: 2147483647;
    display: flex; flex-direction: column;
}
#job-panel.is-open { transform: translateX(0); }

/* A real flex row above the iframe, not an overlay on top of it -- so it
   can never be scrolled away (the iframe's own scrolling is entirely
   below it) and the title and close icon always share one line, flush
   with each other end to end. */
#job-panel-header {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: 68px;
    /* Same padding-inline as .apply-container/.career-hero__container
       (career-redesign.css's --apply-container-pad, 16px) -- this title and
       the close button are the one piece of chrome that sits outside the
       iframe showing job.html, so its edges have to be set to match the
       content below by hand rather than inheriting the shared container. */
    padding-inline: 16px;
    background: #ffffff; border-bottom: 1px solid #e4e7eb;
}
#job-panel-title {
    font-family: 'Wix Madefor Display', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px; font-weight: 700; color: #15181c;
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#job-panel-close {
    all: unset;
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: #ffffff; border: 1px solid #e4e7eb;
    color: #3a4048; font-size: 16px; cursor: pointer;
}
#job-panel-close:hover { background: #eef0f3; }

#job-panel-frame {
    flex: 1 1 auto; width: 100%; height: 100%;
    border: none; background: #f6f7f9;
    /* The iframe scrolls its own document internally; this stops that
       scroll from "chaining" into the page behind once it hits the end,
       which overflow:hidden on body alone does not prevent. */
    overscroll-behavior: contain;
}

/* Background lock while the panel is open. :has() lets <html> react to the
   existing body.job-panel-open class (already toggled by job-panel.js, see
   openJobPanel()/closeJobPanel()) without adding any new class of our own.
   scrollbar-gutter: stable reserves the scrollbar's own width at all times,
   so hiding it here never shifts the layout by that width -- no scroll
   position bookkeeping needed either: overflow:hidden only refuses further
   scrolling, it never moves the page, so the exact same scrollTop is still
   there the moment job-panel-open is removed and overflow is allowed again. */
html:has(body.job-panel-open) {
    overflow: hidden;
    scrollbar-gutter: stable;
}
body.job-panel-open {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}
/* The panel's own chrome (header, close button) must stay interactive even
   though the rest of the page is locked via touch-action: none above. */
body.job-panel-open #job-panel,
body.job-panel-open #job-panel * { touch-action: auto; }

@media (max-width: 640px) {
    #job-panel { width: 100vw; }
}