/*
Theme Name: Operator Talent
Theme URI: https://procesoperatortalent.nl
Author: High Vibe Media
Description: Operator Talent. Supported by Adecco. Brand theme per Brand Guide v1.0: Raleway, #1F3B60, #171716, #F2F2F2, orange #FF6B1A for CTAs only. Same structure as kinderopvangtalent.nl.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: operator-talent
*/

/* Operator Talent. Supported by Adecco.
   Brand tokens from Brand Guide v1.0 */
:root {
  --blue: #1f3b60;
  --blue-dark: #162b47;
  --black: #171716;
  --offwhite: #F2F2F2;
  --white: #ffffff;
  --orange: #FF6B1A;        /* CTA and badges only */
  --orange-dark: #e55d10;
  --grey: #5f6368;
  --grey-light: #d9d9d9;
  --font: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
  --shadow: 0 8px 28px rgba(23, 23, 22, 0.10);
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 800; color: var(--blue); }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; }
.muted { color: var(--grey); }
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 0.6em;
}
.container { max-width: var(--max); margin: 0 auto; padding-inline: 20px; }
.section { padding-block: 72px; }
.section.tight { padding-block: 48px; }
.bg-off { background: var(--offwhite); }
.bg-blue { background: var(--blue); color: var(--white); }
.bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4 { color: var(--white); }
.bg-blue a { color: var(--white); }
.bg-black { background: var(--black); color: var(--white); }
.bg-black h2, .bg-black h3 { color: var(--white); }
.center { text-align: center; }
.narrow { max-width: 760px; margin-inline: auto; }

/* Buttons: orange is reserved for CTAs */
.btn {
  display: inline-block; padding: 14px 28px; border-radius: 999px; font-weight: 700;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit;
  font-size: 1rem; transition: background .15s, color .15s, transform .15s; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); }
.bg-blue .btn-outline { color: var(--white); border-color: var(--white); }
.bg-blue .btn-outline:hover { background: var(--white); color: var(--blue); }
.btn-block { display: block; width: 100%; text-align: center; }
.badge {
  display: inline-block; background: var(--orange); color: var(--white); font-size: 0.75rem;
  font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--white);
  border-bottom: 1px solid var(--grey-light);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--blue); }
.brand img, .brand svg { height: 44px; width: auto; }
.brand-name { text-transform: lowercase; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 900; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand-sub { font-size: 0.68rem; font-weight: 600; color: var(--grey); letter-spacing: .04em; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-weight: 600; color: var(--black); font-size: 0.98rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blue); }
.nav .btn { padding: 10px 20px; font-size: 0.92rem; }
.nav-toggle {
  display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--blue);
}
.nav-toggle span { display: block; width: 26px; height: 3px; background: currentColor; margin: 5px 0; border-radius: 2px; }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0; background: var(--white);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 20px; border-bottom: 1px solid var(--grey-light);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--offwhite); }
  .nav .btn { margin-top: 12px; text-align: center; }
}

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding-block: 80px; }
.hero-media {
  aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--radius); background: var(--blue-dark);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55);
  font-size: .9rem; text-align: center; padding: 20px; border: 1px dashed rgba(255,255,255,.35);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
img.hero-media, img.photo { display: block; width: 100%; object-fit: cover; border: 0; padding: 0; color: transparent; box-shadow: var(--shadow); }
.hero-note { margin-top: 18px; font-size: .9rem; opacity: .85; }
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; padding-block: 56px; }
}

/* Grid and cards */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card {
  background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
  border-top: 4px solid var(--blue);
}
.card.accent { border-top-color: var(--orange); }
.card h3 { margin-top: 0; }
.card .step { display: inline-block; font-weight: 900; color: var(--orange); font-size: 0.85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.card ul { padding-left: 20px; margin: 0 0 1em; }
.card li { margin-bottom: 6px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.photo {
  aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--radius); background: var(--offwhite);
  display: flex; align-items: center; justify-content: center; color: var(--grey); font-size: .9rem;
  text-align: center; padding: 20px; border: 1px dashed var(--grey-light);
}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; } }
.stat-num { font-size: 2.6rem; font-weight: 900; color: var(--orange); line-height: 1; }
.stat-label { font-weight: 600; margin-top: 8px; }
.testimonial { background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.testimonial blockquote { margin: 0 0 16px; font-style: italic; }
.testimonial h4 { margin: 0; color: var(--black); }
.testimonial .muted { font-size: .9rem; }
.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; }
.checklist li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange);
}
.checklist li::after {
  content: ""; position: absolute; left: 6px; top: 9px; width: 5px; height: 9px;
  border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.partner-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; padding-block: 28px; }
/* Co-branding: Adecco logo keeps its own red on light and turns white on navy, never recoloured to OT colours.
   Clear space around the logo is at least half its height (padding), and it is never smaller than 24px high. */
.partner-strip .partner-label { font-weight: 600; color: var(--grey); }
.adecco-logo { display: block; height: 40px; width: auto; padding: 20px; box-sizing: content-box; }
.cobrand .adecco-logo { height: 24px; padding: 12px 0 12px 12px; }
.adecco-panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; }
.adecco-panel .adecco-logo { height: 48px; padding: 24px; }
.partner-strip .logo-slot {
  height: 48px; min-width: 140px; border: 1px dashed var(--grey-light); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--grey); padding-inline: 12px;
}

/* Forms */
.form-card { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.bg-blue .form-card, .bg-off .form-card { color: var(--black); }
.form-card a, .bg-blue .form-card a { color: var(--black); text-decoration: underline; }
.form-card h2, .form-card h3 { color: var(--blue); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--grey-light); border-radius: 8px;
  font-family: inherit; font-size: 1rem; background: var(--white); color: var(--black);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.field textarea { min-height: 110px; resize: vertical; }
.field.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.field.check input { width: auto; margin-top: 4px; }
.form-msg { display: none; padding: 14px 16px; border-radius: 8px; margin-top: 16px; font-weight: 600; }
.form-msg.ok { display: block; background: #e6f4ea; color: #1e6b3a; }
.form-msg.err { display: block; background: #fdecea; color: #b3261e; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Salary table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--white); }
table.salary { width: 100%; border-collapse: collapse; min-width: 640px; }
table.salary th, table.salary td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--offwhite); vertical-align: top; }
table.salary th { background: var(--blue); color: var(--white); font-weight: 700; }
table.salary tr:nth-child(even) td { background: #fafafa; }
table.salary td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.salary tfoot td { font-weight: 800; background: var(--offwhite); }
.faq details { background: var(--white); border-radius: 8px; padding: 16px 20px; margin-bottom: 10px; box-shadow: var(--shadow); }
.faq summary { font-weight: 700; cursor: pointer; color: var(--blue); }
.faq details p { margin: 12px 0 0; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: .4em; }
.cta-band .btn { margin-top: 12px; }

/* Footer */
.site-footer { background: var(--black); color: var(--offwhite); padding-block: 56px 28px; font-size: .95rem; }
.site-footer a { color: var(--offwhite); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-brand .brand { color: var(--white); margin-bottom: 14px; }
.footer-brand .brand-sub { color: rgba(255,255,255,.7); }
.cobrand { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: rgba(255,255,255,.85); font-weight: 600; }
.cobrand .logo-slot { height: 34px; min-width: 110px; border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.6); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.7); }

/* Cookie banner */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 100; background: var(--white);
  color: var(--black); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.25);
  padding: 20px; display: none; gap: 16px; align-items: center; flex-wrap: wrap; max-width: 760px; margin-inline: auto;
}
.cookie-banner.show { display: flex; }
.cookie-banner p { margin: 0; flex: 1 1 320px; font-size: .92rem; }
.cookie-banner .actions { display: flex; gap: 10px; }
.cookie-banner .btn { padding: 10px 18px; font-size: .9rem; }

/* Utilities */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }