/* 4u.sr huisstijl — recruitment.4u.sr (merkgids v1.0) */
:root{
  --paper:#FAF6EC; --paper-2:#F2EAD6; --paper-3:#E8DCC0;
  --ink:#1A1410; --ink-2:#3D3530; --ink-3:#6B5F54;
  --rust:#B8651A; --rust-deep:#8E4D14; --rust-soft:#F2D9AE;
  --line:rgba(26,20,16,.10); --line-strong:rgba(26,20,16,.20);
  --radius:20px;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- basis ---- */
body, .ast-container{
  color:var(--ink-2);
  font-family:var(--sans); font-size:17px; line-height:1.65; letter-spacing:-.01em;
}
html,body,.site,#content,.site-content{ background:var(--paper) !important; }
h1,h2,h3,.entry-title{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  letter-spacing:-.03em; line-height:1.08; text-wrap:balance;
}
h1,.entry-title{ font-size:clamp(2.2rem,5vw,3.4rem); }
h2{ font-size:clamp(1.7rem,3.6vw,2.4rem); }
h4,h5,h6{ font-family:var(--sans); font-weight:700; color:var(--ink); letter-spacing:-.02em; }
h1 em,h2 em,h3 em,.entry-title em{ font-style:italic; color:var(--rust-deep); }
a{ color:var(--rust-deep); }
a:hover{ color:var(--rust); }
::selection{ background:var(--rust-soft); color:var(--ink); }

/* ---- header ---- */
.site-header,.main-header-bar,.ast-primary-header-bar{
  background:var(--paper); border-bottom:1px solid var(--line);
}
.custom-logo{ max-height:44px; width:auto; }
.main-header-menu a,.main-navigation a{ font-family:var(--sans); font-weight:600; color:var(--ink-2); }
.main-header-menu a:hover,.main-navigation a:hover{ color:var(--rust-deep); }

/* ---- knoppen: pilvorm, ink ---- */
.ast-button,.button,button,input[type=submit],input[type=button],.wp-block-button__link,
.job_listings .load_more_jobs,.fouru-apply-btn{
  font-family:var(--sans) !important; font-weight:600 !important;
  background:var(--ink) !important; color:var(--paper) !important;
  border:1px solid var(--ink) !important; border-radius:999px !important;
  padding:.8em 1.7em !important; min-height:44px;
  text-decoration:none !important; box-shadow:none !important;
  transition:background .15s ease;
}
.ast-button:hover,.button:hover,button:hover,input[type=submit]:hover,.fouru-apply-btn:hover,
.fouru-apply-btn:focus{
  background:var(--rust-deep) !important; border-color:var(--rust-deep) !important;
  color:var(--paper) !important;
}

/* ---- formulieren ---- */
input[type=text],input[type=email],input[type=url],input[type=search],input[type=password],
select,textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line-strong) !important;
  border-radius:14px !important; padding:11px 16px;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--rust) !important;
  box-shadow:0 0 0 3px rgba(184,101,26,.15) !important;
}
label{ font-weight:700; color:var(--ink); font-size:.9rem; }

/* ---- WPJM zoek- en filterblok ---- */
.job_filters{
  background:var(--paper-2) !important; border:1px solid var(--line);
  border-radius:var(--radius); padding:18px !important; margin-bottom:20px;
}
.job_filters .search_jobs{ padding:0 !important; }
.job_filters .search_employer{
  margin:0 0 12px; width:100% !important; flex:1 1 100%;
  float:none !important; clear:both; display:block;
}
/* label alleen voor schermlezers — visueel doet de eerste optie dat werk */
.job_filters .search_employer label{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important; margin:-1px !important;
}
.job_filters .search_employer select{
  width:100% !important; min-width:260px;
  font-family:var(--sans) !important; font-size:1rem !important; color:var(--ink) !important;
  background:#fff !important; border:1px solid var(--line-strong) !important;
  border-radius:14px !important; padding:11px 16px !important;
  height:auto !important; min-height:48px; line-height:1.4 !important;
  box-sizing:border-box !important;
}

/* ---- vacaturelijst: kaarten ---- */
ul.job_listings{ border:none !important; }
ul.job_listings li.job_listing,ul.job_listings li.no_job_listings_found{
  background:#fff; border:1px solid var(--line) !important;
  border-radius:var(--radius); margin-bottom:14px; overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
ul.job_listings li.job_listing:hover{
  border-color:var(--line-strong) !important; transform:translateY(-1px);
}
ul.job_listings li.job_listing a{ padding:18px 22px !important; }
ul.job_listings li.job_listing .position h3{
  font-family:var(--serif); font-weight:500; font-size:1.2rem;
  letter-spacing:-.02em; color:var(--ink);
}
ul.job_listings li.job_listing .company strong{ color:var(--ink-2); font-weight:700; }
ul.job_listings li.job_listing .location,ul.job_listings li.job_listing .meta{ color:var(--ink-3); }

/* dienstverband-labels: rustige pills i.p.v. felgroen */
.job-type,ul.job_listings li.job_listing .meta .job-type{
  font-family:var(--sans) !important; font-weight:700 !important; font-size:.72rem !important;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--paper-3) !important; color:var(--ink-2) !important;
  border:1px solid var(--line) !important; border-radius:999px !important; padding:4px 12px !important;
}

/* WPJM's eigen metaregel op detailpagina's: vervangen door onze badges */
.single-job_listing ul.meta{ display:none !important; }
/* placeholder-bedrijfslogo's verbergen */
img.company_logo[src*="company.png"]{ display:none !important; }

/* ---- vacature-detail (plugin-elementen) ---- */
.single-job_listing .entry-meta{ display:none !important; }
.fouru-jobmeta{ margin:0 0 1.1em; display:flex; flex-wrap:wrap; gap:.5em; }
.fouru-badge{
  display:inline-block; background:var(--paper-2); color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:.3em .95em;
  font-size:.82rem; font-weight:700;
}
.fouru-badge-type{ background:var(--paper-3); }
.fouru-badge-deadline{ background:var(--rust-soft); border-color:var(--rust-soft); color:var(--rust-deep); }
.fouru-apply{ margin:1.2em 0; }
.single-job_listing .job_description{ max-width:66ch; }

@media (max-width:768px){
  .fouru-apply-sticky{
    position:fixed; left:0; right:0; bottom:0; background:var(--paper);
    border-top:1px solid var(--line); padding:.6em 1em;
    box-shadow:0 -2px 12px rgba(26,20,16,.10); margin:0; z-index:999; text-align:center;
  }
  .fouru-apply-sticky .fouru-apply-btn{ width:100%; }
}
@media (min-width:769px){ .fouru-apply-sticky{ display:none; } }

/* ---- footer ---- */
.site-footer,.ast-small-footer{ background:var(--paper-2); border-top:1px solid var(--line); color:var(--ink-3); }
.site-footer a{ color:var(--ink-2); }
/* thema-credit verbergen */
.site-footer a[href*="wpastra"]{ display:none !important; }

/* ---- toegankelijkheid ---- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--rust) !important; outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}