/*
Theme Name: ABC Recruitment Theme
Theme URI: https://abcrecruitment.nl/
Author: ChatGPT
Description: Elementor-ready WordPress theme starter for ABC Recruitment, aligned to the ABC style guide (colors + typography).
Version: 1.1.0
License: GPLv2 or later
Text Domain: abc-recruitment
Tags: custom-logo, one-column, full-width-template, elementor
*/

/* ===== ABC Style Guide tokens ===== */
:root{
  --abc-blue:#123B7A;      /* Primary (betrouwbaarheid) */
  --abc-turquoise:#00BFA6; /* Secondary (transparantie/modern) */
  --abc-dark:#020617;      /* Dark background */
  --abc-light:#F5F7FA;     /* Light background */

  --abc-text:#111827;      /* Body text */
  --abc-muted:#6B7280;     /* Secondary text */
  --abc-border:#E5E7EB;    /* Borders */

  --abc-radius:18px;
  --abc-shadow: 0 12px 34px rgba(2,6,23,.10);
  --abc-shadow-soft: 0 10px 26px rgba(2,6,23,.08);

  --abc-container: 1140px;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--abc-light);
  color:var(--abc-text);
  font-family:"Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
.abc-container{ width:min(var(--abc-container), 92vw); margin-inline:auto; }

/* Typography scale (guide) */
h1,h2,h3,h4{ color:var(--abc-blue); line-height:1.18; letter-spacing:-.01em; margin:0 0 10px; }
.abc-h1{ font-size: clamp(32px, 3.3vw, 40px); font-weight:700; }
.abc-h2{ font-size: clamp(24px, 2.4vw, 28px); font-weight:700; }
.abc-lead{ font-size: clamp(16px, 1.2vw, 18px); color: rgba(245,247,250,.82); max-width:62ch; margin:0; }
.abc-small{ font-size:13px; color:var(--abc-muted); }

/* ===== Buttons ===== */
.abc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--abc-border);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.04em;
  transition: transform .12s ease, opacity .12s ease, background .12s ease, border-color .12s ease;
}
.abc-btn:hover{ transform: translateY(-1px); }
.abc-btn:active{ transform: translateY(0); }

.abc-btn.primary{
  background: var(--abc-turquoise);
  border-color: transparent;
  color: #021B1A;
}
.abc-btn.primary:hover{ opacity:.92; }

.abc-btn.ghost{
  background: transparent;
  border-color: rgba(245,247,250,.25);
  color:#F5F7FA;
}
.abc-btn.ghost.dark{
  border-color: var(--abc-border);
  color: var(--abc-text);
}

/* ===== Badge ===== */
.abc-badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(0,191,166,.12);
  border: 1px solid rgba(0,191,166,.25);
  color: var(--abc-turquoise);
  font-weight:600;
  font-size:13px;
}

/* ===== Header (centered menu) ===== */
.abc-header{
  position: sticky; top:0; z-index:50;
  background: rgba(2,6,23,.92);
  border-bottom: 1px solid rgba(18,59,122,.35);
  backdrop-filter: blur(10px);
}
.abc-header-inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  padding:14px 0;
  gap:14px;
}
.abc-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.abc-brand-title{ font-weight:800; letter-spacing:.2px; color:#F5F7FA; }
.abc-nav{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
}
.abc-nav a{
  color:#F5F7FA;
  text-decoration:none;
  font-weight:600;
  opacity:.9;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:13px;
}
.abc-nav a:hover{ opacity:1; color:var(--abc-turquoise); }

.abc-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }

.abc-menu-toggle{
  display:none;
  border:1px solid rgba(245,247,250,.25);
  border-radius:999px;
  padding:10px 14px;
  background:transparent;
  color:#F5F7FA;
  font-family:inherit;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
}

@media (max-width: 900px){
  .abc-menu-toggle{ display:inline-flex; }
  .abc-nav{ display:none; }
  body.abc-nav-open .abc-nav{
    display:flex;
    position:absolute;
    left:0; right:0;
    top:64px;
    padding:14px 16px;
    background: rgba(2,6,23,.98);
    border-bottom: 1px solid rgba(18,59,122,.35);
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:14px;
  }
  .abc-header-inner{ grid-template-columns: auto 1fr auto; }
}

/* ===== Hero ===== */
.abc-hero{
  padding: 78px 0 44px;
  background:
    radial-gradient(900px 500px at 18% 10%, rgba(0,191,166,.22), transparent 60%),
    radial-gradient(900px 520px at 85% 8%, rgba(18,59,122,.30), transparent 62%),
    linear-gradient(180deg, rgba(2,6,23,1) 0%, rgba(2,6,23,.96) 100%);
  color:#F5F7FA;
}
.abc-hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:34px;
  align-items:center;
}
@media (max-width: 900px){
  .abc-hero-grid{ grid-template-columns:1fr; }
}

.abc-hero .abc-h1{ color:#F5F7FA; margin:.3em 0 .25em; }
.abc-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }

/* KPI cards */
.abc-kpis{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:26px; }
@media (max-width: 900px){ .abc-kpis{ grid-template-columns:1fr; } }

/* ===== Sections ===== */
.abc-section{ padding: 54px 0; }
.abc-section p{ color:var(--abc-muted); margin:0 0 18px; }
.abc-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .abc-grid-3{ grid-template-columns:1fr; } }

/* ===== Cards ===== */
.abc-card{
  background:#ffffff;
  border:1px solid var(--abc-border);
  border-radius: var(--abc-radius);
  padding: 18px;
  box-shadow: var(--abc-shadow-soft);
}
.abc-card h3{ margin:.1em 0 .25em; color:var(--abc-blue); font-weight:700; }
.abc-card .abc-small{ color:var(--abc-muted); }

/* ===== Footer ===== */
.abc-footer{
  background: var(--abc-dark);
  border-top: 1px solid rgba(18,59,122,.35);
  padding: 32px 0;
  color: rgba(245,247,250,.80);
}
.abc-footer a{ color: rgba(245,247,250,.90); text-decoration:none; }
.abc-footer a:hover{ color: var(--abc-turquoise); }
.abc-footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}
@media (max-width: 900px){ .abc-footer-grid{ grid-template-columns:1fr; } }

/* ===== Vacatures UI (plugin) ===== */
.abc-vac-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .abc-vac-list{ grid-template-columns:1fr; } }
.abc-vac-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.abc-pill{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background: var(--abc-light);
  border:1px solid var(--abc-border);
  color: var(--abc-muted);
}

/* Make WP core blocks match theme */
.wp-block-button__link{ border-radius:999px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }