/* ================================================================
   HESKO Design System v2 — Randstad-inspired, HESKO brand colors
   Strategy: target what Elementor never sets (transitions, transforms,
   letter-spacing, shadows on unwired elements) + class-based targeting
   ================================================================ */

:root {
  --clr-green:      #3E8A52;
  --clr-green-10:   rgba(62,138,82,0.10);
  --clr-green-20:   rgba(62,138,82,0.20);
  --clr-orange:     #e58900;
  --clr-dark:       #0F172A;
  --clr-light:      #F8FAFC;
  --clr-gray-100:   #F1F5F9;
  --clr-gray-200:   #E2E8F0;
  --clr-gray-500:   #64748B;
  --clr-gray-600:   #475569;
  --clr-gray-700:   #334155;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.22s;
}

/* ── Base ──────────────────────────────────────────────────────── */
/* Globaal basis-font: Inter. De Elementor-kit zet geen body-font, dus
   zonder dit valt rauwe HTML-tekst (footer/contact/grids/paragrafen)
   terug op een systeem-font. Geen !important: expliciete Playfair-
   accenten op widgets blijven gewoon werken. */
body,
.elementor,
.elementor button,
.elementor input,
.elementor select,
.elementor textarea {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
body {
  color: var(--clr-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography: letter-spacing & line-height ─────────────────── */
/* Elementor sets font-size/weight via ID selectors; we add kerning */
.elementor-widget-heading h1 {
  letter-spacing: -0.03em !important;
  line-height:    1.05    !important;
}
.elementor-widget-heading h2 {
  letter-spacing: -0.025em !important;
  line-height:    1.1     !important;
}
.elementor-widget-heading h3 {
  letter-spacing: -0.015em !important;
  line-height:    1.2     !important;
}
.elementor-widget-heading h4,
.elementor-widget-heading h5 {
  letter-spacing: -0.01em !important;
  line-height:    1.3     !important;
}

/* ── Buttons — contrast-aware colours + hover lift ──────────── */
/* Elementor 3.x ignores the per-widget `button_background_color`, so
   every button silently inherits the kit green. On dark sections that
   green looks dull / "transparent". We fix it deterministically with
   contrast-based classes injected per button (hesko-btn-*). */

.elementor-button {
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease) !important;
  will-change: transform;
}
.elementor-button:active { transform: translateY(0) !important; }

/* Primary — green on white/light sections */
.hesko-btn-primary .elementor-button {
  background-color: var(--clr-green) !important;
  color: #fff !important;
}
.hesko-btn-primary .elementor-button:hover {
  background-color: #326e42 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(62,138,82,0.30) !important;
}

/* CTA — orange on dark sections (high contrast, on-brand accent) */
.hesko-btn-cta .elementor-button {
  background-color: var(--clr-orange) !important;
  color: #fff !important;
}
.hesko-btn-cta .elementor-button:hover {
  background-color: #c77800 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(229,137,0,0.38) !important;
}

/* Light — white on green/orange sections */
.hesko-btn-light .elementor-button {
  background-color: #fff !important;
  color: var(--clr-dark) !important;
}
.hesko-btn-light .elementor-button:hover {
  background-color: #F1F5F9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.20) !important;
}

/* Ghost — outline secondary button on green/dark sections */
.hesko-btn-ghost .elementor-button {
  background-color: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
}
.hesko-btn-ghost .elementor-button:hover {
  background-color: #fff !important;
  color: var(--clr-dark) !important;
  border-color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ── Navigation: Randstad-stijl (lowercase + oranje accent) ──── */
/* Consistent met de "direct naar" quick-links: lowercase labels en
   een oranje onderstreping op hover / actieve pagina. */
.hesko-nav .elementor-nav-menu > li > a {
  position: relative !important;
  text-transform: lowercase !important;
  font-weight: 500 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  transition: color var(--dur) var(--ease) !important;
}
.hesko-nav .elementor-nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 3px;
  background: var(--clr-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.hesko-nav .elementor-nav-menu > li > a:hover,
.hesko-nav .elementor-nav-menu > li.current-menu-item > a,
.hesko-nav .elementor-nav-menu > li.current-menu-ancestor > a {
  background: transparent !important;
  color: var(--clr-dark) !important;
}
.hesko-nav .elementor-nav-menu > li > a:hover::after,
.hesko-nav .elementor-nav-menu > li.current-menu-item > a::after,
.hesko-nav .elementor-nav-menu > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}
/* Iets meer ruimte tussen de menu-items (zoals Randstad) */
.hesko-nav .elementor-nav-menu > li {
  margin: 0 14px;
}
/* Dropdown items (mocht een submenu terugkomen) */
.hesko-nav .elementor-nav-menu--dropdown a,
.hesko-nav ul.sub-menu a {
  text-transform: lowercase !important;
  border-radius: 8px !important;
  transition: background var(--dur) var(--ease) !important;
  padding: 9px 16px !important;
}

/* ── HERO section — pattern & depth (class: hesko-hero) ─────── */
.hesko-hero {
  position: relative;
  overflow: hidden;
}
/* Dot-grid overlay */
.hesko-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.13) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}
/* Light radial glow top-right */
.hesko-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(255,255,255,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(0,0,0,0.18) 0%,   transparent 50%);
  pointer-events: none;
  z-index: 0;
}
/* Content above overlays */
.hesko-hero > .e-con-inner,
.hesko-hero > .elementor-container {
  position: relative;
  z-index: 1;
}

/* ── Vakgebied card row (class: hesko-vakgebied-row) ─────────── */
/* Parent = de wrap-row. Direct children = klikbare discipline-kaarten:
   echte witte kaart + groene-rand-hover + lift. */
.hesko-vakgebied-row > .elementor-element {
  position:      relative;
  background:    #FFFFFF !important;
  border:        1px solid var(--clr-gray-100) !important;
  border-radius: 16px !important;
  padding:       28px 18px !important;
  cursor:        pointer;
  transition:    transform var(--dur) var(--ease),
                 box-shadow var(--dur) var(--ease),
                 border-color var(--dur) var(--ease) !important;
}
.hesko-vakgebied-row > .elementor-element:hover {
  transform:    translateY(-5px)                            !important;
  border-color: var(--clr-green)                            !important;
  box-shadow:   0 16px 40px rgba(62,138,82,0.16),
                0 4px 12px  rgba(62,138,82,0.08)            !important;
}
/* Hele kaart klikbaar: rek de icon-box-link (op het icoon) uit over de
   hele kaart. De titel-link blijft werken (zelfde URL). */
.hesko-vakgebied-row .elementor-icon-box-icon > a::after {
  content:  "";
  position: absolute;
  inset:    0;
  z-index:  1;
}
.hesko-vakgebied-row .elementor-icon-box-title a {
  position: relative;
  z-index:  2;
}

/* ── Step cards (class: hesko-steps-card) ───────────────────── */
.hesko-steps-card {
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}
.hesko-steps-card:hover {
  transform:  translateY(-3px)                              !important;
  box-shadow: 0 10px 32px rgba(15,23,42,0.12)              !important;
}

/* ── Feature blok (class: hesko-feature-card) ───────────────── */
/* GEEN kaart — exact dezelfde behandeling als de icon-boxes:
   alleen een groene cirkel-icoon + tekst, geen bg/rand/padding/lift. */
/* Standalone icon widget in feature blocks — zelfde cirkel als icon-box */
.hesko-feature-card .elementor-widget-icon .elementor-icon {
  display:         inline-flex  !important;
  align-items:     center       !important;
  justify-content: center       !important;
  width:           60px         !important;
  height:          60px         !important;
  border-radius:   50%          !important;
  background:      var(--clr-green-10) !important;
  margin-bottom:   18px          !important;
  transition:      background var(--dur) var(--ease) !important;
}
.hesko-feature-card:hover .elementor-widget-icon .elementor-icon {
  background: var(--clr-green-20) !important;
}
.hesko-feature-card .elementor-widget-icon .elementor-icon i,
.hesko-feature-card .elementor-widget-icon .elementor-icon svg {
  color:     var(--clr-green) !important;
  fill:      var(--clr-green) !important;
  font-size: 30px !important;
  width:     30px !important;
  height:    30px !important;
}

/* ── Icon-box icon circle (everywhere) ──────────────────────── */
/* Elementor sets icon color via ID selector. We add circle bg. */
.elementor-icon-box-icon .elementor-icon {
  display:         inline-flex  !important;
  align-items:     center       !important;
  justify-content: center       !important;
  width:           60px         !important;
  height:          60px         !important;
  border-radius:   50%          !important;
  background:      var(--clr-green-10) !important;
  transition:      background var(--dur) var(--ease) !important;
}
.elementor-icon-box-wrapper:hover .elementor-icon-box-icon .elementor-icon {
  background: var(--clr-green-20) !important;
}
/* Ensure the icon colour stays green (Elementor sets it via ID, but
   this acts as a universal fallback). */
.elementor-icon-box-icon .elementor-icon i {
  color: var(--clr-green) !important;
}

/* Uniforme icoon-grootte voor ALLE icon-boxes (consistent met de
   referentie op de opdrachtgevers-pagina). De widget-icon_size is op
   36 gezet; we borgen het hier zodat alles identiek oogt. */
.elementor-icon-box-icon .elementor-icon i,
.elementor-icon-box-icon .elementor-icon svg {
  font-size: 30px !important;
  width: 30px !important;
  height: 30px !important;
}

/* ── Loop / Opdracht cards ───────────────────────────────────── */
.e-loop-item,
.elementor-posts article {
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}
.e-loop-item:hover,
.elementor-posts article:hover {
  transform:  translateY(-3px)                              !important;
  box-shadow: 0 12px 36px rgba(15,23,42,0.11)              !important;
}

/* ── Testimonial (class: hesko-testimonial) ─────────────────── */
.hesko-testimonial {
  position: relative;
}
.hesko-testimonial::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 3px;
  background: var(--clr-green);
  border-radius: 999px;
}

/* ── Gravity Forms ───────────────────────────────────────────── */
/* Elementor (GF widget) doesn't style inputs — we're free here */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
  border:        1.5px solid var(--clr-gray-200) !important;
  border-radius: 8px                             !important;
  padding:       11px 16px                       !important;
  font-family:   'Inter', sans-serif             !important;
  font-size:     15px                            !important;
  color:         var(--clr-dark)                 !important;
  background:    #fff                            !important;
  transition:    border-color var(--dur) var(--ease),
                 box-shadow   var(--dur) var(--ease) !important;
  width: 100%;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color: var(--clr-green)           !important;
  box-shadow:   0 0 0 3px rgba(62,138,82,0.12) !important;
  outline: none                            !important;
}
/* Select goed leesbaar maken (native weergave + voldoende hoogte) */
.gform_wrapper select {
  -webkit-appearance: menulist            !important;
  -moz-appearance:    menulist            !important;
  appearance:         menulist            !important;
  height:             auto                !important;
  min-height:         46px                !important;
  line-height:        1.5                 !important;
  color:              var(--clr-dark)     !important;
}
.gform_wrapper select option { color: var(--clr-dark); background: #fff; }

/* Formulier op een normale, leesbare breedte (geen effect in de smalle
   reactie-kaart, die is al smaller dan 720px). */
.gform_wrapper {
  max-width:    720px !important;
  margin-left:  auto  !important;
  margin-right: auto  !important;
}
.gform_wrapper label,
.gform_wrapper .gfield_label {
  font-weight: 600  !important;
  font-size:   14px !important;
  color:       var(--clr-gray-700) !important;
  margin-bottom: 6px !important;
}
.gform_wrapper .gform-button,
.gform_wrapper .gform_submit_button,
.gform_wrapper input[type="submit"] {
  background:    var(--clr-green)    !important;
  color:         #fff                !important;
  border:        none                !important;
  border-radius: 8px                 !important;
  font-weight:   600                 !important;
  font-size:     15px                !important;
  padding:       12px 28px           !important;
  cursor:        pointer             !important;
  transition:    filter var(--dur) var(--ease),
                 transform var(--dur) var(--ease) !important;
}
.gform_wrapper .gform-button:hover,
.gform_wrapper .gform_submit_button:hover {
  filter:    brightness(1.08)  !important;
  transform: translateY(-1px)  !important;
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  color: #DC2626 !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* ── Sticky header blur ──────────────────────────────────────── */
.elementor-location-header.elementor-sticky--active {
  backdrop-filter:         blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.06),
              0 4px 16px rgba(15,23,42,0.04) !important;
}

/* ── Images — subtle rounded corners ────────────────────────── */
.elementor-widget-image img {
  border-radius: 12px;
}

/* ── Dividers ────────────────────────────────────────────────── */
.elementor-divider-separator {
  border-color: var(--clr-gray-200) !important;
}

/* ── Section with white background — subtle bottom border ───── */
.elementor-element[style*="background-color:#ffffff"],
.elementor-element[style*="background-color: #ffffff"],
.elementor-element[style*="background-color:#FFFFFF"],
.elementor-element[style*="background-color: #FFFFFF"] {
  border-bottom: 1px solid rgba(226,232,240,0.5);
}

/* ── Footer heading refinement ───────────────────────────────── */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-size:      13px !important;
  font-weight:    700  !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
}

/* ── Responsive: button sizing on mobile ─────────────────────── */
@media (max-width: 768px) {
  .elementor-button {
    font-size: 14px !important;
  }
  .elementor-icon-box-icon .elementor-icon {
    width:  50px !important;
    height: 50px !important;
  }
  .hesko-vakgebied-row .elementor-icon-box-icon .elementor-icon {
    width:  56px !important;
    height: 56px !important;
  }
}

/* ================================================================
   Posts widget (classic skin) — Randstad-like loop cards
   Targets .hesko-loop + Elementor's classic post markup.
   ================================================================ */

/* Grid container — keep Elementor's column count, ensure a clean gap */
.hesko-loop .elementor-posts-container {
  gap: 24px !important;
  grid-gap: 24px !important;
}

/* Wrapper (ECS custom skin) — GEEN eigen kaartlook; de binnenste
   template (.hesko-loop-card) is de echte kaart. Zo voorkomen we de
   dubbele band om elke kaart. */
.hesko-loop article.elementor-post,
.hesko-loop .elementor-post {
  background:     transparent !important;
  border:         0 !important;
  border-radius:  0 !important;
  padding:        0 !important;
  box-shadow:     none !important;
  height:         100% !important;
  display:        flex !important;
  flex-direction: column !important;
  margin-bottom:  0 !important;
}

/* De echte kaart (binnenste container van het loop-template) */
.hesko-loop-card {
  height:     100% !important;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}
.hesko-loop-card:hover {
  transform:  translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(15,23,42,0.12) !important;
}

/* Inner text wrapper should stretch so read-more sits at the bottom */
.hesko-loop .elementor-post__text {
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 1 auto !important;
}

/* Title */
.hesko-loop .elementor-post__title {
  font-size:      18px !important;
  font-weight:    700 !important;
  line-height:    1.3 !important;
  letter-spacing: -0.01em !important;
  margin:         0 0 10px !important;
}
.hesko-loop .elementor-post__title a {
  color:           var(--clr-dark) !important;
  text-decoration: none !important;
  transition:      color var(--dur) var(--ease) !important;
}
.hesko-loop .elementor-post__title a:hover {
  color: var(--clr-green) !important;
}

/* Excerpt */
.hesko-loop .elementor-post__excerpt p {
  color:       var(--clr-gray-500) !important;
  font-size:   14.5px !important;
  line-height: 1.6 !important;
  margin:      0 0 16px !important;
}

/* Read more — green text link, pinned to bottom */
.hesko-loop .elementor-post__read-more {
  color:           var(--clr-green) !important;
  font-weight:     600 !important;
  font-size:       14.5px !important;
  text-decoration: none !important;
  margin-top:      auto !important;
  display:         inline-block !important;
  transition:      color var(--dur) var(--ease) !important;
}
.hesko-loop .elementor-post__read-more:hover {
  color:           #2f6b3f !important;
  text-decoration: underline !important;
}

/* Hide empty thumbnails (cards without images) */
.hesko-loop .elementor-post__thumbnail__link:empty,
.hesko-loop .elementor-post__thumbnail:empty {
  display: none !important;
}

/* ── Opdracht card badges (vakgebied / regio / uurtarief) ────── */
/* Prepended into the Elementor classic-skin excerpt <p> as inline spans. */
.hesko-card-badges {
  display:     block;
  margin-bottom: 12px;
}
.hesko-card-badges + br { display: none; }
.hesko-badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      12px;
  font-weight:    600;
  padding:        4px 10px;
  border-radius:  999px;
  line-height:    1.4;
  margin:         0 6px 6px 0;
}
.hesko-badge--vak {
  background: rgba(62,138,82,0.10);
  color:      #3E8A52;
}
.hesko-badge--regio {
  background: #F1F5F9;
  color:      #334155;
}
.hesko-badge--start {
  background: rgba(229,137,0,0.12);
  color:      #b36b00;
}

/* Hero-variant: zelfde pills op de groene detail-hero.
   Witte achtergrond voor contrast, kleurcodering blijft consistent. */
.hesko-card-badges--hero {
  margin: 4px 0 8px;
}
.hesko-card-badges--hero .hesko-badge {
  background: rgba(255,255,255,0.96) !important;
  font-size: 13px;
  padding:   6px 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.10);
}
.hesko-card-badges--hero .hesko-badge--vak   { color: #2f6b40 !important; }
.hesko-card-badges--hero .hesko-badge--regio { color: #334155 !important; }
.hesko-card-badges--hero .hesko-badge--start { color: #b36b00 !important; }
/* Status-badge: groen = open, grijs = vervuld (bezet)/gesloten */
.hesko-badge--status { background: #3E8A52; color: #ffffff; }
.hesko-badge--status-bezet,
.hesko-badge--status-gesloten { background: #94a3b8; color: #ffffff; }
.hesko-card-badges--hero .hesko-badge--status { color: #2f6b40 !important; }
.hesko-card-badges--hero .hesko-badge--status-bezet,
.hesko-card-badges--hero .hesko-badge--status-gesloten { color: #475569 !important; }

/* ── Reactie-CTA (opdracht) + 'gesloten'-notice ─────────────── */
.hesko-cta-link,
.hesko-cta-link:link,
.hesko-cta-link:visited {
  display:          inline-block;
  background-color: var(--clr-orange);
  color:            #ffffff !important;
  font-weight:      700;
  font-size:        16px;
  text-decoration:  none;
  padding:          13px 28px;
  border-radius:    10px;
  transition:       background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hesko-cta-link:hover {
  background-color: #c77800;
  color:            #ffffff !important;
  transform:        translateY(-2px);
  box-shadow:       0 8px 24px rgba(229,137,0,0.38);
}
.hesko-opdracht-closed {
  color:         #cbd5e1;
  font-size:     15px;
  line-height:   1.6;
  margin:        0 0 16px;
}
.hesko-opdracht-closed strong { color: #fff; }

/* ── Reageren: inline toggle (knop klapt formulier open) ────── */
.hesko-reageer { margin: 0; }
.hesko-reageer__toggle {
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  cursor:           pointer;
  list-style:       none;
  background-color: var(--clr-orange);
  color:            #ffffff;
  font-weight:      700;
  font-size:        16px;
  padding:          13px 28px;
  border-radius:    10px;
  transition:       background-color var(--dur) var(--ease);
}
.hesko-reageer__toggle::-webkit-details-marker { display: none; }
.hesko-reageer__toggle::after {
  content:    '+';
  font-size:  20px;
  font-weight: 400;
}
.hesko-reageer[open] .hesko-reageer__toggle::after { content: '\2212'; }
.hesko-reageer__toggle:hover { background-color: #c77800; }
.hesko-reageer__form {
  margin-top:    20px;
  background:    #ffffff;
  border-radius: 12px;
  padding:       24px;
  text-align:    left;
}

/* ── Vakgebied-FAQ (accordeon) ──────────────────────────────── */
.hesko-faq {
  max-width: 760px;
  margin:    0 auto;
}
.hesko-faq__title {
  font-family:     'Inter', sans-serif;
  font-size:       32px;
  font-weight:     700;
  color:           var(--clr-dark);
  text-align:      center;
  margin:          0 0 28px;
}
@media (max-width: 767px) {
  .hesko-faq__title { font-size: 26px; }
}
.hesko-faq__item {
  border-bottom: 1px solid var(--clr-gray-100);
}
.hesko-faq__q {
  position:      relative;
  cursor:        pointer;
  list-style:    none;
  padding:       20px 36px 20px 0;
  font-family:   'Inter', sans-serif;
  font-size:     17px;
  font-weight:   700;
  color:         var(--clr-dark);
}
.hesko-faq__q::-webkit-details-marker { display: none; }
.hesko-faq__q::after {
  content:    '+';
  position:   absolute;
  right:      4px;
  top:        50%;
  transform:  translateY(-50%);
  font-size:  24px;
  font-weight: 400;
  color:      var(--clr-green);
  transition: transform var(--dur) var(--ease);
}
.hesko-faq__item[open] .hesko-faq__q::after { content: '\2212'; }
.hesko-faq__a {
  padding:     0 0 22px;
  font-size:   16px;
  line-height: 1.7;
  color:       var(--clr-gray-700);
}

/* ── Opdracht kerngegevens (horizontale balk, gelijke kolommen) ─ */
.hesko-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}
.hesko-specs__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--clr-gray-50);
  border: 1px solid var(--clr-gray-100);
  border-radius: 12px;
}
.hesko-specs__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-gray-500);
}
.hesko-specs__value {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-dark);
}
@media (max-width: 600px) {
  .hesko-specs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Opdracht aanvullende vereisten ─────────────────────────── */
.hesko-eisen {
  margin-top: 24px;
}
.hesko-eisen__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--clr-dark);
  margin: 0 0 8px;
}
.hesko-eisen p {
  color: var(--clr-gray-600);
  line-height: 1.65;
  margin: 0 0 10px;
}

/* ── Opdracht "Wat wordt er gevraagd?" ──────────────────────── */
.hesko-vereisten {
  margin-top: 28px;
}
.hesko-vereisten__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--clr-dark);
  margin: 0 0 14px;
}
.hesko-vereisten__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hesko-vereisten__list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  color: var(--clr-gray-700);
  line-height: 1.6;
}
.hesko-vereisten__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clr-green-10);
}
.hesko-vereisten__list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 5px;
  height: 9px;
  border: solid var(--clr-green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Opdracht-filterbalk (vakgebied + regio) ────────────────── */
.hesko-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 32px;
}
.hesko-filter__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.hesko-filter__clear {
  position: absolute;
  top: -2px;
  right: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--clr-gray-500);
  text-decoration: none;
  border-radius: 50%;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hesko-filter__clear:hover,
.hesko-filter__clear:focus { color: #fff; background: var(--clr-orange); }
.hesko-filter__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-gray-500);
}
.hesko-filter__select {
  padding: 10px 38px 10px 14px;
  border: 1.5px solid var(--clr-gray-200);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-dark);
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  appearance: none;
  min-width: 210px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hesko-filter__select:focus {
  border-color: var(--clr-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(62,138,82,0.12);
}
.hesko-filter__reset {
  align-self: flex-end;
  padding-bottom: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-gray-500);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.hesko-filter__reset:hover {
  color: var(--clr-green);
  text-decoration: underline;
}
.hesko-filter__submit {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--clr-green);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 600px) {
  .hesko-filter { flex-direction: column; align-items: stretch; }
  .hesko-filter__select { width: 100%; }
}

/* ── Eigen opdrachten-grid + Ajax "meer laden" ──────────────── */
.hesko-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hesko-grid__cell {
  display: flex;
}
.hesko-grid__cell > .elementor {
  width: 100%;
}
.hesko-grid__empty {
  text-align: center;
  color: var(--clr-gray-500);
  padding: 48px 0;
  font-size: 16px;
}
.hesko-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.hesko-loadmore__btn {
  background: var(--clr-green);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 14px 32px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.hesko-loadmore__btn:hover {
  background: #326e42;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(62,138,82,0.30);
}
@media (max-width: 1024px) {
  .hesko-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hesko-grid { grid-template-columns: 1fr; }
}

/* ── "Meer opdrachten laden" (ECS ajax load-more, ongebruikt) ── */
.ecs-load-more-button {
  display: flex !important;
  justify-content: center;
  margin-top: 36px;
}
.ecs-load-more-button .elementor-button {
  background-color: var(--clr-green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}
.ecs-load-more-button .elementor-button:hover {
  background-color: #326e42 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(62,138,82,0.30);
}
.ecs-load-more-button.ecs-loading .elementor-button {
  opacity: 0.7;
  pointer-events: none;
}

/* ── Footer (3-koloms, oranje kopjes) ───────────────────────── */
.hesko-foot .elementor-widget-text-editor { color: #E2E8F0; }
.hesko-foot__group { margin-bottom: 36px; }
.hesko-foot__group:last-child { margin-bottom: 0; }
.hesko-foot__title {
  color: var(--clr-orange);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.hesko-foot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hesko-foot__list a {
  color: #E2E8F0;
  text-decoration: none;
  font-size: 15px;
  transition: color var(--dur) var(--ease);
}
.hesko-foot__list a:hover { color: #fff; }
.hesko-foot__text {
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.hesko-foot__social { display: flex; gap: 12px; }
.hesko-foot__social a,
.hesko-foot__social a:link,
.hesko-foot__social a:visited {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Icoon expliciet wit houden op hover/focus — anders bloedt de globale
   link-hover-kleur door (zelfde patroon als .hesko-cta-link). */
.hesko-foot__social a:hover,
.hesko-foot__social a:focus {
  background: var(--clr-orange);
  color: #ffffff !important;
  transform: translateY(-2px);
}
.hesko-foot__social a:hover i,
.hesko-foot__social a:focus i {
  color: #ffffff !important;
}
.hesko-foot__legal { display: flex; gap: 28px; flex-wrap: wrap; }
.hesko-foot__legal a {
  color: #CBD5E1;
  text-decoration: none;
  font-size: 14px;
  transition: color var(--dur) var(--ease);
}
.hesko-foot__legal a:hover { color: #fff; }
.hesko-foot__copy { color: #94A3B8; font-size: 14px; margin: 0; }
@media (max-width: 767px) {
  .hesko-foot__title { font-size: 16px; }
}

/* ── "direct naar" quick-links (homepage) ───────────────────── */
.hesko-directnaar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}
.hesko-directnaar__label {
  font-size: 22px;
  font-weight: 400;
  color: var(--clr-gray-600);
}
.hesko-directnaar__link {
  font-size: 22px;
  font-weight: 500;
  color: var(--clr-dark);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--clr-orange);
  transition: color var(--dur) var(--ease);
}
.hesko-directnaar__link:hover { color: var(--clr-orange); }
@media (max-width: 600px) {
  .hesko-directnaar { gap: 18px; }
  .hesko-directnaar__label,
  .hesko-directnaar__link { font-size: 18px; }
}

/* ── Contactpagina (oude stijl: labels links, content rechts) ── */
.hesko-contact__title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--clr-dark);
  margin: 0;
  text-transform: lowercase;
}
.hesko-contact__sub {
  font-size: 18px;
  color: var(--clr-gray-600);
  margin: 12px 0 0;
}
.hesko-contact__label {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  color: var(--clr-dark);
  margin: 0;
  text-transform: lowercase;
}
/* Contactpersoon */
.hesko-person {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}
.hesko-person__avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--clr-green-10);
  color: var(--clr-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.hesko-person__name { display: block; font-size: 18px; color: var(--clr-dark); margin-bottom: 6px; }
.hesko-person__links { display: flex; gap: 20px; }
.hesko-person__links a {
  color: var(--clr-orange);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.hesko-person__links a:hover { color: #c77800; text-decoration: underline; }
/* Contactgegevens */
.hesko-cg h4 { font-size: 17px; font-weight: 700; color: var(--clr-dark); margin: 24px 0 8px; }
.hesko-cg h4:first-child { margin-top: 0; }
.hesko-cg p { margin: 0 0 8px; color: var(--clr-gray-700); font-size: 15px; line-height: 1.6; }
.hesko-cg a { color: var(--clr-orange); text-decoration: none; }
.hesko-cg a:hover { text-decoration: underline; }

/* ── Vacature-kaarten (zelfde stijl als opdracht-kaarten) ──────────────────── */
.hesko-vac-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--clr-gray-200);
  border-radius: 14px;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hesko-vac-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
  border-color: var(--clr-green);
}
.hesko-vac-card__title { font-size: 20px; font-weight: 700; color: var(--clr-dark); margin: 0; }
.hesko-vac-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--clr-gray-600); margin: 0; }
.hesko-vac-card__btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 18px;
  background: var(--clr-green);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
}