/* ==========================================================================
   RedeenKind – Design Tokens & Base Styles
   Extracted from Figma: REK - Visual design (65KD9q1vQtWhQWm6YEDci6)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOR PALETTE — Figma color scales
   -------------------------------------------------------------------------- */
:root {
  /* Wit */
  --Wit:                  #FFFFFF;

  /* Rood */
  --Rood-130:             #7C0029;
  --Rood-100:             #B1003B;
  --Rood-75:              #C5406C;
  --Rood-50:              #D8809D;
  --Rood-25:              #EBBFCE;
  --Rood-10:              #F7E5EB;

  /* Oranje */
  --Oranje-130:           #92470F;
  --Oranje-100:           #D06516;
  --Oranje-75:            #DC8B50;
  --Oranje-50:            #E7B28A;
  --Oranje-25:            #F3D8C5;
  --Oranje-10:            #FAF0E8;

  /* Antraciet */
  --Antraciet-130:        #31312F;
  --Antraciet-100:        #464643;
  --Antraciet-75:         #747472;
  --Antraciet-50:         #A2A2A1;
  --Antraciet-25:         #D1D1D0;
  --Antraciet-10:         #ECECEC;

  /* Turquoise */
  --Turquoise-130:        #5D746F;
  --Turquoise-100:        #BAD9D4;
  --Turquoise-75:         #CBE3DF;
  --Turquoise-50:         #DDECE9;
  --Turquoise-25:         #EEF5F4;
}

/* --------------------------------------------------------------------------
   2. FONT FAMILY
   -------------------------------------------------------------------------- */
:root {
  --Font-Family-Primary:  'Poppins', sans-serif;
}

/* --------------------------------------------------------------------------
   3. FONT WEIGHTS
   -------------------------------------------------------------------------- */
:root {
  --px-weight-regular:    400;
  --px-weight-medium:     500;
  --px-weight-semibold:   600;
  --px-weight-bold:       700;
  --px-weight-extrabold:  800;
  --px-weight-black:      900;
}

/* --------------------------------------------------------------------------
   4. LINE HEIGHTS — clamp(mobile, preferred, desktop)
   Mobile: 390px — Desktop: 1440px
   -------------------------------------------------------------------------- */
:root {
  --Line-Height-xs:       16px;
  /* sm: 24 → 28 */
  --Line-Height-sm:       clamp(24px, 22.514px + 0.381vw, 28px);
  /* md: 32 → 36 */
  --Line-Height-md:       clamp(32px, 30.514px + 0.381vw, 36px);
  /* lg: 42 → 48 */
  --Line-Height-lg:       clamp(42px, 39.771px + 0.571vw, 48px);
  /* xl: 48 → 80 */
  --Line-Height-xl:       clamp(48px, 36.114px + 3.048vw, 80px);
}

/* --------------------------------------------------------------------------
   5. FONT SIZES — clamp(mobile, preferred, desktop)
   Mobile: 390px — Desktop: 1440px
   -------------------------------------------------------------------------- */
:root {
  /* H1: 40 → 72 */
  --Font-Size-H1:         clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);
  /* H2: 32 → 60 */
  --Font-Size-H2:         clamp(2rem, 1.35rem + 2.667vw, 3.75rem);
  /* H3: 24 → 48 */
  --Font-Size-H3:         clamp(1.5rem, 0.943rem + 2.286vw, 3rem);
  /* H4: 20 → 36 */
  --Font-Size-H4:         clamp(1.25rem, 0.879rem + 1.524vw, 2.25rem);
  /* H5: 18 → 24 */
  --Font-Size-H5:         clamp(1.125rem, 0.986rem + 0.571vw, 1.5rem);
  /* Body: 18 (fixed) */
  --Font-Size-Body:       18px;
  /* Body Small: 16 (fixed) */
  --Font-Size-Body-Small: 16px;
  /* Labels: 14 (fixed) */
  --Font-Size-Labels:     14px;
}

/* --------------------------------------------------------------------------
   7. SPACING SCALE — EM Basis
   Base unit: Mobile 14px (390) → Desktop 20px (1440)
   Each token = multiplier × base.  Tablet (740px) falls linearly.
   -------------------------------------------------------------------------- */
:root {
  /* D10:  140 → 200 */
  --D10:               clamp(8.75rem, 7.357rem + 5.714vw, 12.5rem);
  /* D5:   70 → 100 */
  --D5:                clamp(4.375rem, 3.679rem + 2.857vw, 6.25rem);
  /* D3:   42 → 60 */
  --D3:                clamp(2.625rem, 2.207rem + 1.714vw, 3.75rem);
  /* D2:   28 → 40 */
  --D2:                clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem);
  /* D1.5: 21 → 30 */
  --D15:               clamp(1.313rem, 1.104rem + 0.857vw, 1.875rem);
  /* D1.25: 17.5 → 25 */
  --D125:              clamp(1.094rem, 0.920rem + 0.714vw, 1.563rem);
  /* D1:   14 → 20 */
  --D1:                clamp(0.875rem, 0.736rem + 0.571vw, 1.25rem);
  /* D0.75: 10.5 → 15 */
  --D075:              clamp(0.656rem, 0.552rem + 0.429vw, 0.938rem);
  /* D0.5: 7 → 10 */
  --D05:               clamp(0.438rem, 0.368rem + 0.286vw, 0.625rem);
  /* D0.25: 3.5 → 5 */
  --D025:              clamp(0.219rem, 0.184rem + 0.143vw, 0.313rem);
  /* D0.01: 2 (fixed) */
  --D001:              0.125rem;
}

/* --------------------------------------------------------------------------
   8. BORDER RADIUS — Figma: R8, R12, RFull
   -------------------------------------------------------------------------- */
:root {
  --R8:                   8px;
  --R12:                  12px;
  --RFull:                360px;
}

/* --------------------------------------------------------------------------
   9. LAYOUT
   -------------------------------------------------------------------------- */
:root {
  --px-row-width:         1220px;
  --px-row-width-narrow:  1040px;
  /* Container padding: D1 mobile (14px) → D3 desktop (60px) */
  --px-gutter:            clamp(0.875rem, -0.193rem + 4.381vw, 3.75rem);
}

/* --------------------------------------------------------------------------
   10. SHADOWS
   -------------------------------------------------------------------------- */
:root {
  --px-shadow-subtle:     0 1px 3px rgba(0, 0, 0, 0.08);
  --px-shadow-hover:      0 4px 12px rgba(0, 0, 0, 0.1);
  --px-shadow-elevated:   0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   11. TRANSITIONS
   -------------------------------------------------------------------------- */
:root {
  --px-duration-fast:     0.15s;
  --px-duration-normal:   0.3s;
  --px-duration-slow:     0.5s;
  --px-ease-out:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --px-ease-in-out:       cubic-bezier(0.42, 0, 0.58, 1);
}


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. RESET & DOCUMENT
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-regular);
  line-height: 1.5;
  color: var(--Antraciet-100);
  background-color: var(--Wit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   13. ACCESSIBILITY – DOM-focused (WCAG AA)
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--D075) var(--D1);
  background: var(--Antraciet-100);
  color: var(--Wit);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-semibold);
  text-decoration: none;
  z-index: 100000;
}

:focus-visible {
  outline: 2px solid var(--Oranje-100);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, .h1 { font-size: var(--Font-Size-H1); line-height: 1.2; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--Font-Size-H2); line-height: 1.2; letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--Font-Size-H3); line-height: 1.3; letter-spacing: -0.02em; }
h4, .h4 { font-size: var(--Font-Size-H4); line-height: 1.3; letter-spacing: -0.02em; }
h5, .h5 { font-size: var(--Font-Size-H5); line-height: 1.3; letter-spacing: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-weight: var(--px-weight-bold);
  color: var(--Antraciet-100);
}

/* ── Heading component — visual size override classes ── */
.px-heading {
  font-family: var(--Font-Family-Primary);
  font-weight: var(--px-weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--Antraciet-100);
}

.heading--h1 { font-size: var(--Font-Size-H1); line-height: 1.2; }
.heading--h2 { font-size: var(--Font-Size-H2); line-height: 1.2; }
.heading--h3 { font-size: var(--Font-Size-H3); line-height: 1.3; }
.heading--h4 { font-size: var(--Font-Size-H4); line-height: 1.3; }

.px-heading--mobile { display: none; }

@media (max-width: 768px) {
  .px-heading--desktop { display: none; }
  .px-heading--mobile  { display: block; }
}

p {
  margin: 0 0 var(--D1);
}

a:not(.px-btn):not(.px-card-link):not(.px-icon-blocks__card):not(.px-icon-blocks__back-link):not(.px-breadcrumb__link):not(.px-vergelijkbare-vacatures__card):not(.px-posts__card) {
  color: var(--Oranje-100);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--px-duration-fast) var(--px-ease-out);
}
a:not(.px-btn):not(.px-card-link):not(.px-icon-blocks__card):not(.px-icon-blocks__back-link):not(.px-breadcrumb__link):not(.px-vergelijkbare-vacatures__card):not(.px-posts__card):hover {
  color: var(--Oranje-130);
}

/* Card-links: reset browser default underline */
a.px-card-link {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   15. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.px-container {
  width: 100%;
  max-width: calc(var(--px-row-width) + var(--px-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--px-gutter);
}

.px-container--narrow {
  max-width: var(--px-row-width-narrow);
}

.px-section {
  padding-block: var(--D3);
}