/* Jordan Jobs refinement layer, 2026-10-11.
 * Loaded after palette.css. Keeps the flag identity, Cairo/Tajawal and every admin option;
 * gives shared components one alignment, one type scale and one compact job card.
 */

/* ---------- Browser surfaces ---------- */
html { accent-color: var(--jj-primary); scrollbar-color: #c4cbd2 var(--jj-bg); }
::selection { background: color-mix(in srgb, var(--jj-primary) 20%, #fff); color: var(--jj-dark); }
input, textarea { caret-color: var(--jj-primary); }
body a { text-underline-offset: .24em; text-decoration-thickness: 1px; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--jj-primary); outline-offset: 2px; }
body :is(.jj-total, .jj-job-meta, .jj-job-salary, .jj-job-stats, .jj-taxonomy-branch small, .jj-pager, time) { font-variant-numeric: tabular-nums; }

:lang(ar) :is(blockquote, em, i, cite, address) { font-style: normal; }

/* ---------- Labels above headings: the heading carries the section on its own ---------- */
body .jj-hero-eyebrow,
body .jj-city-heading .jj-kicker,
body .jj-photo-kicker,
body .jj-rail-intro .jj-kicker,
html body .jj-facebook .jj-facebook-label,
html body .jj-channel-card .jj-channel-eyebrow,
body .jj-tldr-label,
body .jj-guide-box small { display: none !important; }
/* Category tags move below the title, beside the reading time. */
body .jj-art-head { display: flex; flex-direction: column; }
body .jj-art-head > .jj-art-tags { order: 1; margin: .75rem 0 0; justify-content: center; }
body .jj-pcard-body { display: flex; flex-direction: column; }
body .jj-pcard-body > .jj-pcard-top { order: 1; margin: .25rem 0 0; }
body .jj-pcard-body > .jj-pcard-foot { order: 2; }
body .jj-post-body { display: flex; flex-direction: column; }
body .jj-post-body > .jj-badge { order: 1; align-self: flex-start; margin: .25rem 0 .75rem; }
body .jj-post-body > .jj-read { order: 2; }

/* ---------- Section headings: two levels only ---------- */
body .jj-sec-title,
body .jj-city-heading h2,
body .jj-country-section h2,
html body .jj-channel-card h2,
html body .jj-facebook h2 {
    font-family: var(--jj-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--jj-dark);
    margin: 0;
}
body .jj-directory-head h2 {
    font-family: var(--jj-display);
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.55;
    color: var(--jj-dark);
}
body .jj-sec-head .jj-sec-head-text p,
body .jj-country-section p,
body .jj-directory-head p { font-size: .9375rem; line-height: 1.7; color: var(--jj-muted); }
body .jj-sec-head { margin-bottom: 1.25rem; align-items: end; }
body .jj-city-heading { margin-bottom: 1rem; align-items: end; }

/* ---------- One content width: every homepage band aligns to the masthead ---------- */
body .jj-board .jj-country-wrap { width: 100%; }
body .jj-country-nav .jj-country-wrap { width: min(1152px, calc(100% - 32px)); }
body .jj-faq-wrap .jj-faq { margin-inline: 0; max-width: 56rem; }
body .jj-intro-card { margin-inline: 0; max-width: 56rem; padding-top: 1.5rem; border-top: 1px solid var(--jj-line); }
body .jj-intro-card p { max-width: 75ch; }
html body .jj-channel-placement--banner { width: min(1152px, calc(100% - 32px)); margin-inline: auto; padding-inline: 0; }
html body .jj-channel-placement--banner .jj-channel-card { width: 100%; margin-inline: 0; border-radius: 12px; }
html body .jj-facebook > .container { max-width: none; width: min(1152px, calc(100% - 32px)); padding-inline: 0; margin-inline: auto; }
html body .jj-facebook .jj-facebook-card { width: 100%; margin-inline: 0; border-radius: 12px; }

/* ---------- Job card: one compact row in every listing ---------- */
body .jj-job.jj-job {
    display: grid !important;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    grid-template-areas:
        "logo head badge"
        "logo meta action"
        "logo info action";
    column-gap: 1rem;
    row-gap: .125rem;
    align-items: start;
    height: auto;
    padding: 1.125rem 1.25rem;
    box-shadow: none;
}
body .jj-job > .jj-job-top,
body .jj-job > .jj-job-foot { display: contents !important; }
body .jj-job .jj-job-top > .jj-logo {
    grid-area: logo;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0;
    border: 1px solid var(--jj-line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
body .jj-job .jj-job-top > .jj-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
body .jj-job .jj-job-head { grid-area: head; min-width: 0; }
body .jj-job .jj-job-title {
    margin: 0 !important;
    font-family: var(--jj-display);
    font-size: 1.0625rem !important;
    font-weight: 700;
    line-height: 1.6;
}
body .jj-job .jj-job-title a { color: var(--jj-dark); text-decoration: none; }
body .jj-job .jj-job-title a:hover { color: var(--jj-primary); text-decoration: underline; }
body .jj-job .jj-job-company { margin-top: .0625rem; font-size: .9375rem; font-weight: 500; line-height: 1.6; color: var(--jj-muted); }
body .jj-job .jj-job-top > .jj-badge {
    grid-area: badge;
    justify-self: end;
    align-self: start;
    margin: .1875rem 0 0 !important;
}
body .jj-job > .jj-job-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: .125rem 1.125rem;
    margin: .5rem 0 0 !important;
    padding: 0;
}
body .jj-job > .jj-job-meta li {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0;
    background: none;
    font-size: .875rem;
    line-height: 1.7;
    color: var(--jj-muted);
}
body .jj-job > .jj-job-meta .jj-i { width: 15px; height: 15px; color: #8a939b; }
body .jj-job .jj-job-foot-info {
    grid-area: info;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .125rem 1.125rem;
    min-width: 0;
    margin: 0;
}
body .jj-job .jj-job-salary {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--jj-text);
}
body .jj-job .jj-job-salary .jj-i { width: 15px; height: 15px; color: var(--jj-primary); }
body .jj-job .jj-job-salary .jj-muted { font-weight: 500; font-size: .875rem; color: var(--jj-muted); }
body .jj-job .jj-job-card-stats { display: inline-flex; gap: .875rem; margin: 0; padding: 0; border: 0; background: none; }
body .jj-job .jj-job-card-stats .jj-job-stats-item { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--jj-muted); }
body .jj-job .jj-job-card-stats strong { font-weight: 700; color: var(--jj-text); }
body .jj-job .jj-job-foot > .jj-btn {
    grid-area: action;
    align-self: end;
    justify-self: end;
    min-height: 2.75rem;
    margin: 0;
    padding: 0 1.125rem;
    border-radius: 6px;
    font-size: .9375rem;
}
body .jj-job:hover { border-color: var(--jj-line); }
body .jj-vacancy-list .jj-job:hover,
body .jj-list-item .jj-job:hover { background: #fbfcfd; }
body .jj-list-item .jj-job:hover, body .jj-grid-item .jj-job:hover { border-color: #cfd6dc; }

/* Featured: the badge says it; no stripe. */
body .jj-job.is-featured { box-shadow: none; border-top-color: var(--jj-line); }
body .jj-vacancy-list .jj-job.is-featured::before { content: none; }
body .jj-badge.jj-badge-accent {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .125rem .5rem;
    border: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--jj-accent) 8%, #fff);
    color: var(--jj-accent);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.8;
    white-space: nowrap;
}
body .jj-badge.jj-badge-accent::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Listing pages: cards sit in one column with even spacing. */
body .jj-list-item { margin-bottom: .75rem; }
body .jj-list-item .jj-job { border: 1px solid var(--jj-line); border-radius: 8px; }

/* A card narrower than ~560px (phones, grid cells, narrow panels)
 * gives the title the full row and puts salary beside the action. */
:has(> .jj-job) { container-type: inline-size; }
@container (max-width: 560px) {
    body .jj-job.jj-job {
        grid-template-columns: 2.75rem minmax(0, 1fr) auto;
        grid-template-areas:
            "logo head head"
            "logo badge badge"
            "meta meta meta"
            "info info action";
        column-gap: .75rem;
        padding: 1rem;
    }
    body .jj-job .jj-job-top > .jj-logo { width: 2.75rem; height: 2.75rem; }
    body .jj-job .jj-job-top > .jj-badge { justify-self: start; margin-top: .375rem !important; }
    body .jj-job > .jj-job-meta { gap: 0 .875rem; margin-top: .625rem !important; }
    body .jj-job .jj-job-foot-info { align-self: center; gap: 0 .875rem; margin-top: .375rem; }
    body .jj-job .jj-job-foot > .jj-btn { align-self: center; margin-top: .375rem; padding: 0 1rem; }
}
/* Multi-column card grids are one container, so they opt in explicitly. */
@media (min-width: 768px) {
    body .jj-job-grid > .jj-job.jj-job {
        grid-template-columns: 2.75rem minmax(0, 1fr) auto;
        grid-template-areas:
            "logo head head"
            "logo badge badge"
            "meta meta meta"
            "info info action";
        column-gap: .75rem;
        padding: 1rem;
    }
    body .jj-job-grid > .jj-job .jj-job-top > .jj-logo { width: 2.75rem; height: 2.75rem; }
    body .jj-job-grid > .jj-job .jj-job-top > .jj-badge { justify-self: start; margin-top: .375rem !important; }
    body .jj-job-grid > .jj-job > .jj-job-meta { gap: 0 .875rem; margin-top: .625rem !important; }
    body .jj-job-grid > .jj-job .jj-job-foot-info { align-self: center; gap: 0 .875rem; margin-top: .375rem; }
    body .jj-job-grid > .jj-job .jj-job-foot > .jj-btn { align-self: center; margin-top: .375rem; padding: 0 1rem; }
}

@media (max-width: 767.98px) {
    body .jj-job .jj-job-title { font-size: 1rem !important; }
    body .jj-job .jj-job-company { font-size: .875rem; }
    body .jj-job > .jj-job-meta li { font-size: .8125rem; }
    body .jj-job .jj-job-salary { font-size: .875rem; }
}

/* ---------- Country choice: a compact strip, not six poster cards ---------- */
body .jj-country-section { padding: 2.5rem 0 2rem; background: transparent; }
body .jj-country-section h2 { margin-bottom: .25rem; }
body .jj-country-section p { margin: 0 0 1rem; }
body .jj-country-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
body .jj-country-card {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: .625rem .875rem;
    border: 1px solid var(--jj-line);
    border-radius: 8px;
    box-shadow: none !important;
    transform: none !important;
}
body .jj-country-card:hover { border-color: #cfd6dc; background: var(--jj-surface); }
body .jj-country-card:hover strong { color: var(--jj-primary); }
body .jj-country-image { flex: 0 0 auto; width: auto; height: auto !important; padding: 0; border: 0 !important; background: none !important; }
body .jj-country-image img { width: 2.25rem; height: 2.25rem; object-fit: contain; filter: none; border-radius: 50%; box-shadow: 0 0 0 1px rgb(6 6 7 / 8%); }
body .jj-country-caption { padding: 0; gap: 0; min-width: 0; }
body .jj-country-caption strong { font-family: var(--jj-display); font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--jj-dark); }
body .jj-country-caption span { display: none; }
@media (max-width: 1023.98px) {
    body .jj-country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    body .jj-country-section { padding-top: 2rem; }
    body .jj-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    body .jj-country-card { min-height: 3.5rem; padding: .5rem .75rem; gap: .625rem; }
    body .jj-country-image img { width: 2rem; height: 2rem; }
}

/* Inner-page country bar: one quiet row; scrolls sideways on phones instead of stacking. */
body .jj-country-nav { padding: .5rem 0; background: var(--jj-surface); border-block-end: 1px solid var(--jj-line); }
body .jj-country-nav-inner { flex-wrap: nowrap; gap: 1rem; }
body .jj-country-brand { flex: 0 0 auto; font-family: var(--jj-display); font-size: 1rem; color: var(--jj-dark); }
body .jj-country-brand img { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: contain; }
body .jj-country-links { flex-wrap: nowrap; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
body .jj-country-links::-webkit-scrollbar { display: none; }
body .jj-country-links a { flex: 0 0 auto; min-height: 2.75rem; padding: .375rem .75rem; border-radius: 6px; background: transparent; font-size: .9375rem; }
body .jj-country-links a:hover { background: var(--jj-bg); }
@media (max-width: 767.98px) {
    body .jj-country-nav-inner { gap: .5rem; }
    body .jj-country-links { margin-inline-end: -16px; padding-inline-end: 16px; }
    body .jj-country-links a { padding-inline: .625rem; }
}

/* ---------- Homepage panels ---------- */
/* Today's list: one quiet line when nothing is new yet. */
body .jj-today-empty { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1rem 1.25rem; text-align: start; }
body .jj-today-empty-icon, body .jj-today-empty > span:not(.jj-today-empty-icon) { display: none !important; }
body .jj-today-empty p { margin: 0; font-size: .9375rem; color: var(--jj-text); }
body .jj-today-empty .jj-btn { margin: 0; min-height: 2.75rem; }
@media (max-width: 991.98px) {
    body .jj-board-layout--today:has(> #jj-today-jobs .jj-today-empty) { grid-template-areas: "main" "today" "rail"; }
}

/* Rail call-outs: solid flag-colour fields; gradients removed. */
body .jj-rail-intro { background: var(--jj-green-panel) !important; border-color: var(--jj-green-panel); }
body .jj-rail-hiring { background: var(--jj-red-panel) !important; border-color: var(--jj-red-panel); }
body .jj-rail-intro, body .jj-rail-hiring { border-radius: 8px; box-shadow: none; }

/* Specialties: a ruled table of fields, no nested cards or text triangles. */
body .jj-directory-block .jj-taxonomy-grid {
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--jj-line);
    align-items: stretch;
}
body .jj-directory-block .jj-taxonomy-branch {
    border: 0;
    border-bottom: 1px solid var(--jj-line);
    border-inline-start: 1px solid var(--jj-line);
    border-radius: 0;
    background: var(--jj-surface);
}
body .jj-directory-block .jj-taxonomy-branch:nth-child(3n + 1) { border-inline-start: 0; }
body .jj-taxonomy-branch summary {
    position: relative;
    display: block;
    min-height: 0;
    padding: 1rem 1.25rem;
    padding-inline-end: 2.5rem;
    list-style: none;
    font-family: var(--jj-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--jj-dark);
}
body .jj-taxonomy-branch summary::-webkit-details-marker { display: none; }
body .jj-taxonomy-branch summary::marker { content: ''; }
body .jj-taxonomy-branch summary::after {
    content: '';
    position: absolute;
    inset-inline-end: 1.25rem;
    top: 1.375rem;
    width: .5rem;
    height: .5rem;
    border-right: 1.5px solid #8a939b;
    border-bottom: 1.5px solid #8a939b;
    transform: rotate(45deg);
    transition: transform var(--jj-duration-normal, 160ms) ease;
}
body .jj-taxonomy-branch[open] summary::after { transform: rotate(-135deg); top: 1.625rem; }
body .jj-taxonomy-branch summary small { margin-top: .125rem; font-family: var(--primary-font); font-size: .8125rem; font-weight: 500; color: var(--jj-muted); }
body .jj-taxonomy-branch summary:hover span { color: var(--jj-primary); }
body .jj-taxonomy-branch[open] summary { background: var(--jj-bg); border-bottom: 1px solid var(--jj-line); }
@media (max-width: 991.98px) {
    body .jj-directory-block .jj-taxonomy-branch { border-inline-start: 0; }
}

/* Article cards: show the whole cover; the covers carry their own titles. */
body .jj-post-img, body .jj-pcard-img { aspect-ratio: 1200 / 630; height: auto !important; }
body .jj-post-img img, body .jj-pcard-img img { width: 100%; height: 100% !important; object-fit: cover; }
body .jj-pcard.is-featured .jj-pcard-img { aspect-ratio: 1200 / 630; min-height: 0; align-self: center; }

/* FAQ rows: hairline list instead of floating cards. */
body .jj-faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--jj-line); }
body .jj-faq-item { margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--jj-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
body .jj-faq-item[open] { background: var(--jj-surface) !important; }
body .jj-faq-item[open] .jj-faq-toggle { background: var(--jj-bg); color: var(--jj-primary); }

/* ---------- Job page ---------- */
body .jj-jp-side, body .jj-jp-main { display: flex; flex-direction: column; gap: 1rem; }
body .jj-jp-side > *, body .jj-jp-main > * { margin: 0 !important; }
body .jj-jp-head { border: 1px solid var(--jj-line) !important; border-top: 3px solid var(--jj-primary) !important; }
body .jj-tldr { border: 1px solid color-mix(in srgb, var(--jj-primary) 30%, var(--jj-line)) !important; }
body .jj-prose hr, body .jj-art-body hr { height: 0; margin: 1.75rem 0; border: 0; border-top: 1px solid var(--jj-line); background: none; opacity: 1; }

/* ---------- Articles ---------- */
body .jj-art-cover { border-radius: 12px; }
body .jj-art-cover img { height: auto; max-height: none; object-fit: contain; }
body .jj-art-grid { grid-template-columns: minmax(0, 1fr) 300px; justify-content: stretch; }
body .jj-art-main { border-radius: 12px; }
body .jj-art-body .jj-takeaways { border: 1px solid var(--jj-line); border-top: 3px solid var(--jj-primary); border-radius: 8px; }
body .jj-art-body blockquote { border: 1px solid color-mix(in srgb, var(--jj-primary) 22%, var(--jj-line)); border-radius: 8px; background: color-mix(in srgb, var(--jj-primary) 5%, #fff); }
@media (max-width: 991.98px) {
    body .jj-art-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- English pages: arrows point the reading direction ---------- */
html:lang(en) a svg:has(> path[d="M19 12H5M12 19l-7-7 7-7"]) { transform: scaleX(-1); }

/* ---------- Page heads: one band for every index page ----------
 * Breadcrumbs, title, lead, then an optional search row; white band, start-aligned on the content edge.
 * Shared by the plugin's .jj-page-head, the theme's breadcrumb cover and the jobs search banner.
 * Detail pages (job, company, article) use the same crumbs and title scale without the band.
 */
body .jj-page-head,
body .breadcrumb-cover,
body .banner-hero.hero-3 {
    position: relative;
    margin: 0;
    padding: 1.75rem 0 2rem !important;
    background: var(--jj-surface) !important;
    border-bottom: 1px solid var(--jj-line);
    text-align: start;
}
body .banner-hero.hero-3 > .banner-inner { width: 100%; max-width: none; margin-inline: auto; padding-inline: 12px; }
@media (min-width: 576px) { body .banner-hero.hero-3 > .banner-inner { max-width: 540px; } }
@media (min-width: 768px) { body .banner-hero.hero-3 > .banner-inner { max-width: 720px; } }
@media (min-width: 992px) { body .banner-hero.hero-3 > .banner-inner { max-width: 960px; } }
@media (min-width: 1200px) { body .banner-hero.hero-3 > .banner-inner { max-width: 1200px; padding-inline: 24px; } }
body .jj-page-head > .jj-country-wrap,
body .jj-country-body > .jj-country-wrap { width: min(1152px, calc(100% - 32px)); }
body .jj-page-head .jj-page-title,
body .breadcrumb-cover :is(h1, h2),
body .banner-hero.hero-3 .block-banner h1 {
    margin: 0 !important;
    font-family: var(--jj-display);
    font-size: 2rem !important;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--jj-dark) !important;
    text-align: start;
}
body .jj-page-head .jj-page-lead,
body .breadcrumb-cover p,
body .banner-hero.hero-3 .block-banner > .font-lg {
    max-width: 70ch;
    margin: .5rem 0 0 !important;
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.8;
    color: var(--jj-muted) !important;
    text-align: start;
}
body .banner-hero.hero-3 .block-banner { padding: 0 !important; text-align: start !important; }
body .banner-hero.hero-3 .block-banner .form-find { max-width: 58rem; margin: 1.25rem 0 0 !important; border: 1px solid var(--jj-line); box-shadow: none; }

/* Theme breadcrumb cover: crumbs move above the title and read as plain text crumbs. */
body .breadcrumb-cover .row { flex-direction: column-reverse; }
body .breadcrumb-cover .row > [class*="col-"] { flex: 0 0 auto; width: 100%; max-width: 100%; text-align: start !important; }
body .breadcrumb-cover .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0 0 .625rem !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    list-style: none;
}
body .breadcrumb-cover .breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; margin: 0 !important; padding: 0 !important; font-size: .875rem; line-height: 1.7; color: var(--jj-muted); }
body .breadcrumb-cover .breadcrumbs li::before { content: none !important; display: none !important; }
body .breadcrumb-cover .breadcrumbs li + li::before { content: '/' !important; display: inline !important; position: static; width: auto; height: auto; margin: 0; background: none; color: #a3abb2; transform: none !important; }
body .breadcrumb-cover .breadcrumbs li a { display: inline; margin: 0 !important; font-size: .875rem; line-height: 1.7; color: var(--jj-primary) !important; }
body .breadcrumb-cover .breadcrumbs .icon-home { display: none; }
body .jj-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-bottom: 1rem; font-size: .875rem; line-height: 1.7; }

/* Country portal head: the search row sits in the band. */
body .jj-portal-head .jj-country-search { max-width: 46rem; margin-top: 1.25rem; gap: .5rem .75rem; }
body .jj-portal-head .jj-country-search label { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--jj-dark); }
body .jj-portal-head .jj-country-search input { min-height: 3rem; border: 1px solid var(--jj-line); border-radius: 6px; background: #fff; }
body .jj-portal-head .jj-country-search button { min-height: 3rem; border-radius: 6px; background: var(--jj-primary); color: #fff; font-weight: 700; }
body .jj-page-head + .companies-list,
body .jj-page-head + .jj-country-body { padding-top: 1.5rem; }

/* Country bar: the current section is marked. */
body .jj-country-links a[aria-current="page"] { color: var(--jj-dark) !important; border-radius: 0; box-shadow: inset 0 -2px 0 var(--jj-primary); }

/* Article head: start-aligned over the body column, like the job and company pages. */
body .jj-art-head { align-items: flex-start; max-width: none; margin-inline: 0; text-align: start; }
body .jj-art-head .jj-art-lead { max-width: 70ch; margin-inline: 0 !important; text-align: start; }
body .jj-art-head .jj-art-meta, body .jj-art-head > .jj-art-tags { justify-content: flex-start; }
@media (min-width: 992px) {
    body .jj-art-grid { gap: 2.5rem; }
    body .jj-art-head, body .jj-art-cover { width: calc(100% - 300px - 2.5rem); max-width: none; margin-inline: 0 auto; }
}

@media (max-width: 767.98px) {
    body .jj-page-head, body .breadcrumb-cover, body .banner-hero.hero-3 { padding: 1.25rem 0 1.5rem !important; }
    body .jj-page-head .jj-page-title,
    body .breadcrumb-cover :is(h1, h2),
    body .banner-hero.hero-3 .block-banner h1 { font-size: 1.625rem !important; }
}

/* ---------- Inner pages share the masthead's content width ---------- */
@media (min-width: 1200px) {
    body .main .container { max-width: 1200px; padding-inline: 24px; }
}
body .jj-page-body > .jj-sec > .jj-container { max-width: none; padding-inline: 0; }

/* ---------- Company directory ---------- */
@media (min-width: 992px) {
    body .jj-company-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: .75rem 1rem; }
    body .jj-company-filters > :first-child { grid-column: auto; }
    body .jj-company-filters > button { padding-inline: 1.75rem; white-space: nowrap; }
}
body .jj-company-filters label { font-size: .9375rem; font-weight: 700; color: var(--jj-dark); }
@media (max-width: 767.98px) {
    body .jj-company-filters { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    body .jj-company-filters > button { width: 100%; }
    body #jj-company-clear { justify-content: center; min-height: 2.75rem; }
}
body #jj-company-clear { padding-inline: .5rem; font-size: .9375rem; color: var(--jj-muted); text-decoration: underline; }
body #jj-company-clear:hover { color: var(--jj-primary); }
body .jj-company-advanced summary { display: inline-flex; align-items: center; gap: .5rem; list-style: none; color: var(--jj-primary); font-weight: 700; }
body .jj-company-advanced summary::-webkit-details-marker { display: none; }
body .jj-company-advanced summary::marker { content: ''; }
body .jj-company-advanced summary::after {
    content: '';
    width: .5rem;
    height: .5rem;
    margin-top: -.25rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
body .jj-company-advanced[open] summary::after { transform: rotate(-135deg); margin-top: .25rem; }
body .jj-results-count { margin: 1.25rem 0 .75rem; font-size: .9375rem; color: var(--jj-muted); }
body #jj-company-results .company-grid { display: flex; margin-bottom: 1.5rem; }
body #jj-company-results .card-grid-1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--jj-line);
    border-radius: 8px;
    background: var(--jj-surface);
    box-shadow: none;
    text-align: center;
    transform: none !important;
}
body #jj-company-results .card-grid-1:hover { border-color: #cfd6dc; }
body #jj-company-results .card-grid-1 .image-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9rem;
    margin: 0 0 1rem;
    padding: 0;
    border-radius: 6px;
    background: var(--jj-surface);
}
body #jj-company-results .card-grid-1 .image-box a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
body #jj-company-results .card-grid-1 .image-box img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 4px; }
body #jj-company-results .card-grid-1 .info-text { display: flex; flex: 1; flex-direction: column; margin: 0 !important; }
body #jj-company-results .card-grid-1 h5 { margin: 0; font-family: var(--jj-display); font-size: 1rem; font-weight: 700; line-height: 1.6; }
body #jj-company-results .card-grid-1 h5 a { color: var(--jj-dark); }
body #jj-company-results .card-grid-1 h5 a:hover { color: var(--jj-primary); }
body #jj-company-results .card-grid-1 .card-location:empty { display: none; }
body #jj-company-results .card-grid-1 .mt-30 { margin-top: auto !important; padding-top: 1rem; }
body #jj-company-results .card-grid-1 .btn-grey-big {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: .375rem 1rem;
    border: 1px solid var(--jj-line);
    border-radius: 6px;
    background: var(--jj-surface);
    color: var(--jj-primary);
    font-size: .9375rem;
    font-weight: 700;
}
body #jj-company-results .card-grid-1 .btn-grey-big:hover { border-color: var(--jj-primary); background: var(--jj-primary); color: #fff; }
@media (max-width: 575.98px) {
    body #jj-company-results .company-grid { width: 50%; margin-bottom: .75rem; padding-inline: 6px; }
    body #jj-company-results > .row { margin-inline: -6px; }
    body #jj-company-results .card-grid-1 { padding: .875rem; }
    body #jj-company-results .card-grid-1 .image-box { height: 6rem; margin-bottom: .75rem; }
    body #jj-company-results .card-grid-1 h5 { font-size: .9375rem; }
    body #jj-company-results .card-grid-1 .btn-grey-big { font-size: .875rem; padding-inline: .5rem; }
}

/* ---------- Footer ---------- */
body .footer .footer-col-1 .color-text-paragraph-2 { font-size: .875rem !important; font-weight: 400 !important; line-height: 1.9; color: #c9ced3 !important; }
body .footer .footer-col-1 > a > img[src=""] { display: none; }
body .footer .footer-col-1 > a { display: inline-block; }
body .footer .footer-col-1 > a > img:not([src=""]) { display: block; width: 11.25rem; max-width: 100%; height: auto; aspect-ratio: 720 / 186; }
/* The footer logo is the light brand variant (flag colours kept); only the social icons are turned white. */
html.jj-footer-dark body .footer .footer-col-1 > a > img { filter: none; }
body .footer .row:has(> .jj-channel-footer) { margin-inline: 0; }
body .footer .jj-channel-footer { padding-inline: 0; }

/* ---------- Step 3 (2026-10-11): icons, masthead menu, job and company pages, footer ---------- */

/* The theme icon font (58KB) was downloaded for four glyphs; draw them as SVG masks instead. */
body .header .main-menu li.has-children > a::after,
body i.fi-rr-angle-small-down::before,
body i.fi-rr-search::before,
body i.fi-rr-arrow-small-up::before {
    content: '' !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--jj-icon) center / contain no-repeat;
    mask: var(--jj-icon) center / contain no-repeat;
    font-family: inherit !important;
    vertical-align: -.125em;
}
body .header .main-menu li.has-children > a::after,
body i.fi-rr-angle-small-down::before { --jj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
body i.fi-rr-search::before { --jj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
body i.fi-rr-arrow-small-up::before { --jj-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); }

/* Masthead menu: starts under the logo; each dropdown chevron sits beside its own label. */
@media (min-width: 992px) {
    body .header .main-header .header-nav { text-align: start; }
    body .header .main-header .header-nav .main-menu { justify-content: flex-start; margin-inline-start: -.875rem; }
    body .header .main-menu > li > a { display: inline-flex; align-items: center; gap: .375rem; }
    body .header .main-menu li.has-children > a::after { position: static !important; inset: auto !important; margin: 0 !important; width: .875rem; height: .875rem; color: #8a939b; opacity: 1; transform: none; }
    body .header .main-menu > li.has-children > a .arrow-down { display: none !important; }
    body .header .main-menu > li > a:hover { color: var(--jj-dark); }
}

/* Job page: the facts read as a ruled two-column table, not icon tiles. */
body .jj-facts:not(.jj-facts-list) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--jj-line);
}
body .jj-facts:not(.jj-facts-list) .jj-fact {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
    padding: .875rem 0;
    border-bottom: 1px solid var(--jj-line);
}
body .jj-facts:not(.jj-facts-list) .jj-fact:nth-child(odd) { padding-inline-end: 1.25rem; }
body .jj-facts:not(.jj-facts-list) .jj-fact:nth-child(even) { padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--jj-line); }
body .jj-fact .jj-fact-icon {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin-top: .1875rem;
    padding: 0;
    border-radius: 0;
    background: none !important;
    color: #8a939b;
}
body .jj-fact .jj-fact-icon .jj-i { width: 18px; height: 18px; }
body .jj-fact dt { margin: 0; font-size: .8125rem; font-weight: 500; line-height: 1.6; color: var(--jj-muted); }
body .jj-fact dd { margin: .125rem 0 0; font-size: .9375rem; font-weight: 700; line-height: 1.7; color: var(--jj-dark); overflow-wrap: anywhere; }
body .jj-fact dd a { color: var(--jj-primary); }
body .jj-facts-list .jj-fact { padding: .625rem 0; border-bottom: 1px solid var(--jj-line); }
body .jj-facts-list .jj-fact:last-child { border-bottom: 0; }
@media (max-width: 575.98px) {
    body .jj-facts:not(.jj-facts-list) { grid-template-columns: minmax(0, 1fr); }
    body .jj-facts:not(.jj-facts-list) .jj-fact:nth-child(n) { padding-inline: 0; border-inline-start: 0; }
}

/* Job and company sidebars: the employer comes first, promotions last. */
body .jj-jp-side > .jj-co-card { order: -2; }
body .jj-jp-side > .jj-card:has(.jj-facts-list) { order: -2; }
body .jj-jp-side > .jj-company-socials { order: -1; }
body .jj-jp-side > .jj-channel-placement { order: 8; }
body .jj-jp-side > .jj-card:has(.jj-mini-job) { order: 9; }
body .jj-jp-side .jj-card, body .jj-guide-box { border: 1px solid var(--jj-line) !important; border-radius: 8px; background: var(--jj-surface) !important; box-shadow: none; }
body .jj-guide-box .jj-guide-ico { background: color-mix(in srgb, var(--jj-primary) 8%, #fff) !important; color: var(--jj-primary); border-radius: 6px; }
body .jj-guide-box strong { font-size: .9375rem; line-height: 1.7; color: var(--jj-dark); }
body .jj-guide-box:hover { border-color: #cfd6dc !important; }
body .jj-guide-box:hover strong { color: var(--jj-primary); }

/* Featured on the job page uses the same dot badge as the cards. */
body .jj-jp-head .jj-job-meta li.jj-meta-accent { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .5rem; border-radius: 4px; background: color-mix(in srgb, var(--jj-accent) 8%, #fff) !important; color: var(--jj-accent) !important; font-size: .75rem; font-weight: 700; line-height: 1.8; text-decoration: none; box-shadow: none; }
body .jj-jp-head .jj-job-meta li.jj-meta-accent::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Company page: open jobs first (the H1 promises them), the directory note last and quiet. */
body .jj-cp .jj-jp-main > #jj-company-jobs { order: -1; }
body .jj-cp .jj-jp-main > .jj-card:first-child { order: 9; padding-block: 1rem; background: var(--jj-bg) !important; }
body .jj-cp .jj-jp-main > .jj-card:first-child .jj-card-title { font-size: .9375rem; }
body .jj-cp .jj-jp-main > .jj-card:first-child p { font-size: .875rem; line-height: 1.8; color: var(--jj-muted); }
body .jj-cp .jj-jp-main > .jj-insights { order: 5; }

/* Company stats: a quiet line inside the header, not a metric band. */
body .jj-cp-stats { display: flex !important; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: .875rem 1.5rem; border-top: 1px solid var(--jj-line); list-style: none; }
body .jj-cp-stats li { display: inline-flex; align-items: center; gap: .5rem; padding: 0 !important; border: 0 !important; }
body .jj-cp-stats .jj-cp-stat-icon { width: auto; height: auto; padding: 0; background: none !important; color: #8a939b; }
body .jj-cp-stats .jj-cp-stat-icon .jj-i { width: 18px; height: 18px; }
body .jj-cp-stats li > span:last-child { display: inline-flex; align-items: baseline; gap: .375rem; }
body .jj-cp-stats strong { font-size: 1rem; line-height: 1.6; }
body .jj-cp-stats small { font-size: .875rem; }

/* Fields and governorates in open listings: side by side, values as tappable links. */
body .jj-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
body .jj-insights > .jj-card { margin: 0 !important; }
* + .jj-insights, body .jj-insights + * { margin-top: 1rem; }
body .jj-insights .jj-job-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
body .jj-insights .jj-job-meta li { padding: 0; background: none; }
body .jj-insights .jj-job-meta a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .25rem .75rem; border: 1px solid var(--jj-line); border-radius: 6px; font-size: .875rem; color: var(--jj-text); text-decoration: none; }
body .jj-insights .jj-job-meta a:hover { border-color: var(--jj-primary); color: var(--jj-primary); }

/* ---------- Footer ---------- */
body .footer { padding-top: 3rem; }
body .footer .h6, body .footer h6 { margin-bottom: 1rem !important; font-family: var(--jj-display); font-size: 1rem !important; font-weight: 700; color: #fff !important; }
body .footer .footer-col-2 ul li, body .footer .menu-footer li { margin-bottom: .5rem; }
body .footer .footer-col-2 a, body .footer .menu-footer a { font-size: .9375rem; line-height: 1.8; color: #b9c0c6 !important; text-decoration: none; }
body .footer .footer-col-2 a:hover, body .footer .menu-footer a:hover { color: #fff !important; text-decoration: underline; }
body .footer .footer-social { display: flex; gap: .5rem; margin-top: 1rem; }
body .footer .footer-social .icon-socials { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0; border: 1px solid rgb(255 255 255 / 16%); border-radius: 8px; }
body .footer .footer-social .icon-socials img { width: 1.25rem; height: 1.25rem; }
body .footer .footer-social .icon-socials:hover { border-color: rgb(255 255 255 / 45%); }
body .footer .footer-bottom { color: #9aa2a9; font-size: .875rem; }

/* ---------- Motion (2026-10-11): theme option «حركات الموقع الاحترافية» adds html.jj-motion-on ---------- */
/* Before motion.js runs, only the homepage entrance starts hidden; the head script reveals it after 2.5s regardless. */
.jj-motion:not(.jj-motion-done) .jj-home-hero .jj-hero-copy > *,
.jj-motion:not(.jj-motion-done) .jj-board .jj-board-search { opacity: 0; }
.jj-motion .jj-photo-background { transition: none !important; will-change: transform; }

/* Between pages: the masthead and phone tab bar hold still while the page content crossfades and settles. */
.jj-motion-on header.header { view-transition-name: jj-masthead; }
.jj-motion-on .jj-tabbar { view-transition-name: jj-tabbar; }
.jj-motion-on .jj-jp-title { view-transition-name: jj-job-title; }
::view-transition-old(root) { animation: 140ms cubic-bezier(.4, 0, 1, 1) both jj-page-out; }
::view-transition-new(root) { animation: 340ms cubic-bezier(.16, 1, .3, 1) both jj-page-in; }
::view-transition-group(jj-masthead), ::view-transition-group(jj-tabbar) { animation: none; z-index: 3; }
::view-transition-old(jj-masthead), ::view-transition-old(jj-tabbar) { display: none; }
::view-transition-new(jj-masthead), ::view-transition-new(jj-tabbar) { animation: none; }
::view-transition-group(jj-job-title) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
@keyframes jj-page-out { to { opacity: 0; } }
@keyframes jj-page-in { from { opacity: 0; transform: translateY(10px); } }

/* Feedback: presses acknowledge, cards answer the pointer, disclosures open instead of jumping. */
.jj-motion-on :is(.jj-btn, .btn, .jj-country-card, .jj-guide-box, .jj-insights .jj-job-meta a, .jj-pcard, .jj-post, .jj-list-item .jj-job, .jj-job-grid > .jj-job, #jj-company-results .card-grid-1) {
    transition: transform 160ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.jj-motion-on :is(.jj-btn, .btn):active { transform: scale(.97); }
@media (hover: hover) {
    html.jj-motion-on body :is(.jj-country-card, .jj-guide-box, .jj-pcard, .jj-post, .jj-list-item .jj-job, .jj-job-grid > .jj-job, #jj-company-results .card-grid-1):hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 12px 28px -16px rgb(6 6 7 / 28%);
    }
    .jj-motion-on .jj-country-card:hover .jj-country-image img { transform: scale(1.06); }
    .jj-motion-on .jj-country-image img { transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
    /* Employer wall: calm until pointed at. */
    .jj-motion-on .jj-employer-logos img { filter: grayscale(1); opacity: .72; transition: filter 260ms ease, opacity 260ms ease; }
    .jj-motion-on .jj-employer-logos a:is(:hover, :focus-visible) img { filter: none; opacity: 1; }
}
.jj-motion-on { interpolate-size: allow-keywords; }
.jj-motion-on :is(.jj-taxonomy-branch, .jj-faq-item, .jj-company-advanced)::details-content {
    height: 0;
    overflow: clip;
    transition: height 280ms cubic-bezier(.16, 1, .3, 1), content-visibility 280ms allow-discrete;
}
.jj-motion-on :is(.jj-taxonomy-branch, .jj-faq-item, .jj-company-advanced)[open]::details-content { height: auto; }

@media (prefers-reduced-motion: reduce) {
    .jj-motion-on :is(.jj-btn, .btn):active,
    html.jj-motion-on body :is(.jj-country-card, .jj-guide-box, .jj-pcard, .jj-post, .jj-list-item .jj-job, .jj-job-grid > .jj-job, #jj-company-results .card-grid-1):hover { transform: none !important; }
    .jj-motion-on :is(.jj-taxonomy-branch, .jj-faq-item, .jj-company-advanced)::details-content { transition: none; }
}

/* ---------- Search pages, 2026-10-13: "at a glance" facts and counted links ----------
 * One quotable sentence with live counts (SearchCopy::facts), then counted chips that share
 * the look of the insight links. Field × governorate pages reuse the country page head.
 */
body .jj-glance { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--jj-line); border-radius: 8px; background: var(--jj-surface); }
body .jj-card .jj-glance { margin: .75rem 0; padding: 0; border: 0; background: none; }
body .jj-glance-wrap { margin-block: 1.5rem; }
body .jj-glance-answer { margin: 0; max-width: 75ch; font-size: 1rem; line-height: 1.9; color: var(--jj-text); }
body .jj-glance-answer strong { color: var(--jj-dark); }
body .jj-glance-title { margin: 1rem 0 .5rem !important; font-family: var(--jj-display); font-size: 1rem !important; font-weight: 700; line-height: 1.6; color: var(--jj-dark) !important; }
body .jj-glance-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
body .jj-glance-list li { margin: 0; padding: 0; background: none; }
body .jj-glance-list :is(a, .jj-glance-chip) { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .25rem .75rem; border: 1px solid var(--jj-line); border-radius: 6px; background: #fff; font-size: .875rem; line-height: 1.6; color: var(--jj-text); text-decoration: none; }
body .jj-glance-list a:hover { border-color: var(--jj-primary); color: var(--jj-primary); }
body :is(.jj-glance-count, .jj-insight-count) { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--jj-muted); }
body .jj-insights .jj-job-meta a { gap: .5rem; }
body .jj-glance-subfields { margin: 0 0 1.5rem; }
body .jj-specialty-location > .jj-country-wrap > h2 { margin-top: .5rem; }
body .jj-specialty-more { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1rem; }
body .jj-specialty-more a { min-height: 44px; display: inline-flex; align-items: center; }