/* ==========================================================================
   Wadifa Info — design system layer (2026-10-14). Loaded LAST in _LayoutFront / _LayoutFrontFr.
   Refines wf-pro.css tokens instead of competing with them; only shared components are styled
   here, by their existing class names, so no view logic or URL changes.
   Font: IBM Plex Sans Arabic (SIL OFL 1.1, Content/fonts/plex/OFL.txt) — Arabic + Latin from one
   family, so mixed AR/FR lines share metrics. font-display:optional = never a layout shift.
   Icons: Lucide (ISC, Views/Shared/_WfIcons.cshtml) — .wf-i.
   ========================================================================== */

@font-face{font-family:"WF Plex";font-style:normal;font-weight:400;font-display:optional;src:url(/Content/fonts/plex/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:700;font-display:optional;src:url(/Content/fonts/plex/plex-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:400;font-display:optional;src:url(/Content/fonts/plex/plex-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:700;font-display:optional;src:url(/Content/fonts/plex/plex-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:400;font-display:optional;src:url(/Content/fonts/plex/plex-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:700;font-display:optional;src:url(/Content/fonts/plex/plex-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 1. Tokens ----------
   Moroccan green tuned for WCAG AA: white on --brand = 5.0:1 (old #16a34a was 3.3:1), --muted 4.8:1 on white. */
:root{
  --brand:#15803d; --brand-2:#116632; --brand-soft:#ecf7f0; --brand-line:#c7e6d2; --brand-ink:#0b3d22;
  --navy:#13233f; --ink:#0f1b2e; --body:#3b4a5e; --muted:#64748b; --faint:#94a3b8;
  --line:#e3e8ef; --line-2:#d3dbe5; --bg:#f6f8fa; --card:#fff;
  --accent:#b45309; --accent-soft:#fff7ea; --accent-line:#f3d19c;   /* amber: deadlines, urgency */
  --danger:#b42318; --danger-soft:#fdecec;
  --font:"WF Plex","Segoe UI",system-ui,-apple-system,Tahoma,Arial,sans-serif;
  /* type scale (1.125 minor third, 16px base) */
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem;
  --fs-2xl:clamp(1.45rem,1.1rem + 1.6vw,2rem); --fs-3xl:clamp(1.65rem,1.2rem + 2.2vw,2.5rem);
  /* spacing (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(15,27,46,.06);
  --sh:0 4px 14px rgba(15,27,46,.07);
  --sh-lg:0 14px 36px rgba(15,27,46,.12);
  --ring:0 0 0 3px rgba(21,128,61,.28);
  --ease:cubic-bezier(.2,.7,.2,1); --t:.16s;
  --tap:44px;                                      /* WCAG 2.2 target size, with margin */
}

/* ---------- 2. Base ---------- */
body{font-family:var(--font);font-size:var(--fs-base);line-height:1.75;color:var(--body);background:var(--bg)}
html[lang="fr"] body,html[dir="ltr"] body{line-height:1.65}
h1,h2,h3,h4,h5{font-family:var(--font);color:var(--ink);font-weight:700;letter-spacing:0;line-height:1.35}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)} h4{font-size:var(--fs-md)}
html[dir="ltr"] h1,html[dir="ltr"] h2{letter-spacing:-.01em}
::selection{background:#cdebd8;color:var(--ink)}
/* Visible, high-contrast focus (WCAG 2.4.11/2.4.13): outline survives forced-colors, box-shadow does not. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;box-shadow:none;border-radius:var(--r-xs)}
a:focus-visible,button:focus-visible{outline-offset:3px}
bdi,.wf-ltr{unicode-bidi:isolate}
.wf-i{width:1.1em;height:1.1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.17em}
.wf-i-lg{width:1.35em;height:1.35em}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- 3. Header & navigation ---------- */
.wf-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:none}
.wf-brand{font-weight:700;color:var(--ink)}
.wf-brand small{color:var(--muted);font-weight:400;font-size:var(--fs-xs)}
.wf-menu a,.wf-more-btn{font-weight:600;font-size:var(--fs-sm);color:var(--body);border-radius:var(--r-sm);transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.wf-menu a:hover,.wf-more-btn:hover,.wf-menu a.is-active{background:var(--brand-soft);color:var(--brand-2)}
.wf-menu a[aria-current="page"]{color:var(--brand-2);background:var(--brand-soft)}
.wf-more-dd{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:var(--s2)}
.wf-more-dd a{font-weight:500;font-size:var(--fs-sm);padding:9px 12px;border-radius:var(--r-sm);display:flex;align-items:center;gap:10px}
.wf-more-dd a .wf-i{color:var(--muted)}
.wf-more-dd a:hover .wf-i{color:var(--brand)}
.wf-icon-btn{min-width:var(--tap);min-height:var(--tap);border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);transition:border-color var(--t),background var(--t)}
.wf-icon-btn:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.wf-burger{min-width:var(--tap);min-height:var(--tap)}

/* ---------- 4. Buttons, chips, tags, badges ---------- */
.wf-btn{font-family:var(--font);font-weight:700;font-size:var(--fs-md);min-height:var(--tap);border-radius:var(--r);background:var(--brand);color:#fff;box-shadow:none;transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.wf-btn:hover{background:var(--brand-2);transform:none}
.wf-btn:active{transform:translateY(1px)}
.wf-btn--ghost{background:#fff;color:var(--brand-2);border:1px solid var(--brand-line)}
.wf-btn--ghost:hover{background:var(--brand-soft)}
.wf-chip{border:1px solid var(--line);background:#fff;color:var(--body);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);min-height:36px;transition:border-color var(--t),background var(--t)}
.wf-chip:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-2)}
.wf-tag{display:inline-flex;align-items:center;border-radius:var(--r-xs);background:#f1f4f8;color:var(--body);border:1px solid transparent;font-size:var(--fs-xs);font-weight:600;padding:2px 8px;line-height:1.6}
.wf-tag-green,.wf-tag--green{background:var(--brand-soft);color:var(--brand-2);border-color:var(--brand-line)}
.wf-tag.cur{background:var(--brand);color:#fff}
.wf-eyebrow{background:var(--brand-soft);color:var(--brand-2);font-weight:600;font-size:var(--fs-xs);letter-spacing:.01em}
.wf-fresh-new{display:inline-flex;align-items:center;background:var(--brand);color:#fff;border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:700;padding:0 7px;line-height:1.7;vertical-align:.15em;margin-inline-start:4px}

/* ---------- 5. Forms ---------- */
input[type=text],input[type=search],input[type=email],input[type=number],input[type=date],select,textarea,.wf-field .ctl{font-family:var(--font)}
.wf-field .ctl,.wf-field select,.wf-field input{min-height:var(--tap);border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink);font-size:var(--fs-md);transition:border-color var(--t),box-shadow var(--t)}
.wf-field .ctl:hover{border-color:#b9c4d2}
.wf-field .ctl:focus,.wf-field select:focus,.wf-field input:focus{border-color:var(--brand);box-shadow:var(--ring);outline:none}
.wf-field label{font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.wf-field .select2-container--default .select2-selection--single{min-height:var(--tap);border-color:var(--line-2);border-radius:var(--r)}
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--brand);box-shadow:var(--ring)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--brand)}
::placeholder{color:#7b8797;opacity:1}

/* ---------- 6. Offer list cards (index2 / Hireo .job-listing) ----------
   Was ~650px per card on a 375px phone (one fact per line, views shown twice). Now: title,
   one wrapped meta line, tags, then status. ~3 cards per screen. */
.listings-container.compact-list-layout{display:flex;flex-direction:column;gap:var(--s3);box-shadow:none;background:none}
.job-listing{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:var(--s4) var(--s4) var(--s3);margin:0;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.job-listing:hover{border-color:var(--brand-line);box-shadow:var(--sh)}
.job-listing .job-listing-details{display:block;padding:0}
.job-listing .wf-card-head{display:flex;gap:var(--s3);align-items:flex-start}
.job-listing .wf-emp-logo{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);object-fit:contain;background:#fff;flex:none}
.job-listing .job-listing-title{font-size:var(--fs-md);font-weight:700;line-height:1.55;color:var(--ink);margin:0}
.job-listing:hover .job-listing-title{color:var(--brand-2)}
.job-listing .job-listing-description{padding:0;margin-top:var(--s2)}
.job-listing .job-listing-footer{padding:0;background:none;border:0}
.job-listing .job-listing-footer ul{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;padding:0}
.job-listing .job-listing-footer ul li{display:inline-flex;align-items:center;gap:5px;margin:0;padding:0;font-size:var(--fs-sm);color:var(--body);line-height:1.6}
.job-listing .job-listing-footer ul li>i,.job-listing .job-listing-footer ul li>.wf-i{color:var(--muted);font-size:1rem;position:static;margin:0}
/* diploma + specialty rows keep their own line, tags wrap */
.job-listing .job-listing-footer ul li:has(.wf-tag){flex-basis:100%;flex-wrap:wrap;gap:5px}
.job-listing .wf-pop{gap:10px;color:var(--muted)}
.job-listing .wf-pop-i{display:inline-flex;align-items:center;gap:4px;background:none;padding:0;font-size:var(--fs-xs);color:var(--muted)}
/* deadline chips: one family, colour = urgency */
.wf-datechip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:700;padding:3px 8px;border:1px solid transparent;line-height:1.6}
.wf-datechip-orange{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.wf-datechip-red{background:var(--danger-soft);color:var(--danger);border-color:#f5b5b5}
.wf-datechip-expired{background:#f1f4f8;color:var(--muted)}
.wf-datechip-blue,.wf-datechip-date{background:#f1f4f8;color:var(--body)}

/* homepage rows (.wf-job) share the card language */
.wf-job{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.wf-job:hover{border-color:var(--brand-line);box-shadow:var(--sh);transform:none}
.wf-job h3{font-size:var(--fs-md);font-weight:700;line-height:1.55}
.wf-card,.wf-cat{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.wf-cat:hover,.wf-card:hover{border-color:var(--brand-line);box-shadow:var(--sh);transform:none}

/* ---------- 7. Offer detail ---------- */
.wf-offre .single-page-header{background:linear-gradient(180deg,#14532d 0%,#166534 100%)}
.wf-offre .single-page-header .header-details h1{font-size:var(--fs-2xl);line-height:1.4;text-shadow:none}
.wf-offre .single-page-header .wf-meta li{font-size:var(--fs-sm)}
/* the guide / employer-hub / salary cards under the H1 keep their own dark text on light fill */
.wf-offre .single-page-header .header-details p>a[style]{color:var(--ink)!important;font-weight:700!important;font-size:var(--fs-sm);border-radius:var(--r-sm)!important}
.single-page-section h3,.single-page-section h2{font-size:var(--fs-lg)}
.single-page-section{line-height:1.85}
.job-overview{border:1px solid var(--line);border-radius:var(--r);box-shadow:none;overflow:hidden}
.job-overview .job-overview-headline{background:var(--navy);color:#fff;font-weight:700;font-size:var(--fs-md)}
.job-overview .job-overview-inner ul li span{font-weight:700;color:var(--ink)}

/* ---------- 8. Tables, pagination, breadcrumbs, FAQ ---------- */
.wf-main table,.single-page-section table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
.wf-main table th,.single-page-section table th{background:#f1f4f8;color:var(--ink);font-weight:700;text-align:start}
.wf-main table th,.wf-main table td,.single-page-section table th,.single-page-section table td{border:1px solid var(--line);padding:8px 10px}
.pagination ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pagination ul li a,.pagination ul li span{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;color:var(--body);font-weight:600;transition:background var(--t),border-color var(--t)}
.pagination ul li a:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-2)}
.pagination ul li a.current-page,.pagination ul li.active a{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination ul li.disabled a{opacity:.45;pointer-events:none}
.wf-crumb{background:transparent;border:0;padding-inline:0;font-size:var(--fs-sm)}
.wf-crumb a{color:var(--brand-2);font-weight:600}
.wf-qa{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.wf-qa summary{font-weight:700;color:var(--ink);min-height:var(--tap)}

/* ---------- 9. Footer ---------- */
.wf-footer{background:var(--navy)}
.wf-footer h4{font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em}
.wf-footer a{transition:color var(--t)}

/* ---------- 10. Ads stay visibly separate from content (no imitation of cards) ---------- */
.wf-ad{border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);background:transparent;padding:var(--s2) 0}
.wf-ad small{color:var(--faint);font-size:var(--fs-xs)}

/* ---------- 11. Mobile ---------- */
@media (max-width:600px){
  :root{--fs-base:.9375rem}
  .job-listing{padding:var(--s3) var(--s3) var(--s2)}
  .job-listing .wf-emp-logo{width:36px;height:36px}
  .job-listing .job-listing-footer ul{gap:4px 12px}
  .wf-offre .single-page-header .header-details h1{font-size:1.35rem}
}