/* Page polish: register/login side panel, the job page's Apply card, home job cards and hero height.
   Loaded last (see legacy/includes/stylesheets.php). Colours stay on the site's blue. */

/* ── Register & login: the left side says why, instead of repeating "secure access" ── */
.auth-aside { align-self: center; max-width: 520px; }
.auth-aside .lead { color: #5a6485; font-size: 18px; line-height: 1.6; }
.auth-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.auth-points li {
    position: relative;
    padding-left: 34px;
    font-size: 16px;
    font-weight: 700;
    color: #1c2547;
    line-height: 1.4;
}
.auth-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
[dir="rtl"] .auth-points li { padding-left: 0; padding-right: 34px; }
[dir="rtl"] .auth-points li::before { left: auto; right: 0; }
.auth-trust { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #dfe9f6; font-size: 14px; font-weight: 700; color: #3556b0; }
body.theme-dark .auth-aside .lead { color: #a8b3d1; }
body.theme-dark .auth-points li { color: #e6ecf8; }
body.theme-dark .auth-trust { border-color: #2a3a70; color: #93b4e9; }
@media (max-width: 900px) { .auth-aside { max-width: none; } }

/* ── Job page: the Apply card at the top of the sticky right column ── */
.jdet-apply-card { display: grid; gap: 14px; border-radius: 18px; }
.jdet-apply-salary { font-size: 22px; font-weight: 900; letter-spacing: -.01em; color: #0f7b57; line-height: 1.2; }
.jdet-apply-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.jdet-apply-facts li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: #344064; }
.jdet-apply-facts svg { width: 17px; height: 17px; flex: none; fill: none; stroke: #7a86a8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jdet-apply-cta { width: 100%; justify-content: center; text-align: center; padding: 13px 20px; font-size: 15.5px; }
body.theme-dark .jdet-apply-facts li { color: #cbd5e1; }
body.theme-dark .jdet-apply-salary { color: #4ade9b; }

/* ── Home job cards: the salary is what people look for first ── */
.hjob-salary { margin: 2px 0 0; font-size: 14px; font-weight: 900; color: #0f7b57; letter-spacing: -.005em; }
body.theme-dark .hjob-salary { color: #4ade9b; }

/* ── Home hero: tall enough to feel like a hero, not so tall that the next section is hidden ── */
.home-page .hero { min-height: min(calc(100dvh - 82px), 720px) !important; }

/* ── Companies directory: hiring companies lead and read as alive; the rest recede ── */
.dir-card.is-hiring { border-color: #bcd2f2; box-shadow: 0 10px 28px rgba(41, 54, 129, .09); }
.dir-card.is-hiring .dir-jobs { color: #0f7b57; font-weight: 900; }
.dir-card.is-quiet { background: #fbfcfe; box-shadow: none; }
.dir-card.is-quiet:not(:hover) .dir-logo { opacity: .85; }
.dir-card.is-quiet .dir-jobs { color: #8a93ad; }

/* Register & login: the side panel stays beside the (tall) form instead of floating mid-page */
.auth-aside { align-self: start; position: sticky; top: 120px; padding-top: 48px; }
@media (max-width: 900px) { .auth-aside { position: static; padding-top: 0; } }

/* ── Job page: no box inside the box. The big card is the only frame; its sections (About this role,
   Company snapshot, Apply) are separated by a thin line instead of each wearing a border of its own. ── */
.jobs-section .job-detail-main .job-section-card,
.jobs-section .job-detail-main .apply-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.jobs-section .job-detail-main .job-section-card + .job-section-card,
.jobs-section .job-detail-main .job-section-card + .apply-card,
.jobs-section .job-detail-main .apply-card {
    margin-top: 8px;
    padding-top: 26px !important;
    border-top: 1px solid #e3ebf8 !important;
}
body.theme-dark .jobs-section .job-detail-main .job-section-card + .job-section-card,
body.theme-dark .jobs-section .job-detail-main .job-section-card + .apply-card,
body.theme-dark .jobs-section .job-detail-main .apply-card { border-top-color: #2a3a70 !important; }

/* Phones: the three filters each take a full row instead of being squeezed into half-width, label-clipping boxes. */
@media (max-width: 560px) {
    .jobs-filterbar .jfb-row { grid-template-columns: minmax(0, 1fr); }
    .jobs-filterbar .jfb-row > * { grid-column: auto !important; }
}
@media (max-width: 560px) {
    .role-tabs { grid-template-columns: 1fr 1fr !important; gap: 6px; }
    .role-tabs button { padding: 10px 6px; }
    .dir-filters { grid-template-columns: minmax(0, 1fr) !important; }
    .dir-filters > * { grid-column: auto !important; }
}