/**
 * vakmens.css — page-specific styles for /voor-{branche} pSEO pages + the
 * /voor-vakmensen hub. Layers on top of landing-modern.css for nav/footer
 * and global.css for typography.
 *
 * Category accent colour (--vk-accent) flips per branche category. Set on
 * <body class="vakmens-cat-{bouw|creatief|dienst|kennis}"> and used by hero
 * eyebrow, usecase headings, hub-card badges.
 */

.page-vakmens,
.page-vakmens-hub {
  --vk-accent: var(--landing-accent, #015ea8);
  --vk-accent-soft: var(--landing-accent-soft, #e3f1fb);
}
.vakmens-cat-bouw {
  --vk-accent: #c47a00;
  --vk-accent-soft: #fff5e0;
}
.vakmens-cat-creatief {
  --vk-accent: #7b3fbf;
  --vk-accent-soft: #f3e6ff;
}
.vakmens-cat-dienst {
  --vk-accent: #2c6f22;
  --vk-accent-soft: #f1faea;
}
.vakmens-cat-kennis {
  --vk-accent: #015ea8;
  --vk-accent-soft: #e3f1fb;
}

.vakmens-main {
  padding-bottom: 4rem;
}

/* `.landing-container` is not defined anywhere else in the landing CSS, so
   on these pages it used to be a plain block: the hero sat flush against the
   left edge of a 1440px screen with the right half empty, and on a phone
   every section touched the screen edge. Scoped to the trade pages so other
   pages that happen to carry the class keep their own layout. */
.page-vakmens .landing-container,
.page-vakmens-hub .landing-container {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* 48rem of text plus the 1.5rem gutter on each side. The hero shares this
   column, so its left edge lines up with the story underneath it instead of
   floating on its own. */
.page-vakmens .vakmens-narrow,
.page-vakmens-hub .vakmens-narrow,
.page-vakmens .vakmens-hero .landing-container,
.page-vakmens-hub .vakmens-hero .landing-container {
  max-width: 51rem;
}

/* ───── Hero ───── */
.vakmens-hero {
  /* Same clearance under the floating nav as the other text-only heroes
     (.landing-hero-compact); a fixed 4rem on a phone hid the eyebrow. */
  padding: calc(
      var(--landing-nav-height, 76px) + var(--landing-nav-float-y, 12px) +
        var(--landing-hero-clearance-text, 52px)
    )
    0 2.5rem;
  background: linear-gradient(180deg, var(--vk-accent-soft) 0%, transparent 80%);
}
.vakmens-hub-hero {
  padding-bottom: 2rem;
}
.vakmens-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vk-accent);
  background: white;
  border: 1px solid color-mix(in srgb, var(--vk-accent) 20%, transparent);
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.vakmens-h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 1rem;
}
.vakmens-lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--landing-text-muted, #5a6878);
  margin: 0 0 1.5rem;
  max-width: 42rem;
}
.vakmens-hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* ───── Pain / narrative section ───── */
.vakmens-pain {
  padding: 3rem 0 2.5rem;
}
.vakmens-pain h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}
.vakmens-pain p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--landing-text, #2a3947);
  margin: 0 0 1rem;
}

/* ───── Use-case grid ───── */
.vakmens-usecases {
  padding: 3rem 0;
  background: #fafbfc;
  border-top: 1px solid var(--landing-border, #eef1f5);
  border-bottom: 1px solid var(--landing-border, #eef1f5);
}
.vakmens-usecases h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  text-align: center;
}
/* Columns and gap come from the card-row engine in landing-modern.css. */
.vakmens-usecases-grid {
  margin-top: 1.5rem;
}
.vakmens-usecase {
  background: white;
  border: 1px solid var(--landing-border, #eef1f5);
  border-radius: 14px;
  padding: 1.5rem 1.375rem;
  box-shadow: 0 1px 2px rgba(8, 22, 40, 0.04);
}
.vakmens-usecase h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--vk-accent);
  letter-spacing: -0.01em;
}
.vakmens-usecase p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--landing-text-muted, #5a6878);
  margin: 0;
}

/* ───── FAQ ───── */
.vakmens-faq-section {
  padding: 3rem 0 2rem;
}
.vakmens-faq-section h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}
.vakmens-faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vakmens-faq-item {
  background: white;
  border: 1px solid var(--landing-border, #eef1f5);
  border-radius: 12px;
  padding: 0 1.125rem;
  transition: border-color 0.15s;
}
.vakmens-faq-item:hover {
  border-color: var(--landing-border-hover, #d8dde3);
}
.vakmens-faq-item[open] {
  border-color: color-mix(in srgb, var(--vk-accent) 40%, transparent);
}
.vakmens-faq-item summary {
  font-size: 1rem;
  font-weight: 600;
  padding: 1.125rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
  color: var(--landing-text, #0b1620);
}
.vakmens-faq-item summary::-webkit-details-marker {
  display: none;
}
.vakmens-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--vk-accent);
  transition: transform 0.15s;
}
.vakmens-faq-item[open] summary::after {
  content: "−";
}
.vakmens-faq-item p {
  margin: 0 0 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--landing-text-muted, #5a6878);
}

/* ───── CTA ───── */
.vakmens-cta {
  padding: 4rem 0 2rem;
}
.vakmens-cta-inner {
  text-align: center;
}
.vakmens-cta h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}
.vakmens-cta p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--landing-text-muted, #5a6878);
  margin: 0 0 1.5rem;
}
.vakmens-cta-foot {
  font-size: 0.875rem;
  margin-top: 1rem !important;
  /* Muted on its own, not only inside .vakmens-cta: the price line under the
     hero buttons uses it too. */
  color: var(--landing-text-muted, #5a6878);
}
.vakmens-cta-foot a {
  color: var(--vk-accent);
  text-decoration: underline;
}

/* ───── Hub grid ───── */
.vakmens-hub-grid-section {
  padding: 2rem 0 3rem;
}
/* Columns and gap come from the card-row engine in landing-modern.css:
   four up on desktop, so eleven trades read as 4 + 4 + 3 with the last
   row centred instead of 5 + 5 + 1. */
.vakmens-hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: white;
  border: 1px solid var(--landing-border, #eef1f5);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.375rem;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.vakmens-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(8, 22, 40, 0.15);
  border-color: color-mix(in srgb, var(--vk-accent) 40%, transparent);
}
.vakmens-hub-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vk-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vakmens-hub-card h3 {
  font-size: 1.1875rem;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--landing-text, #0b1620);
}
.vakmens-hub-card p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--landing-text-muted, #5a6878);
  margin: 0;
}
.vakmens-hub-arrow {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vk-accent);
}

@media (max-width: 720px) {
  .page-vakmens .landing-container,
  .page-vakmens-hub .landing-container {
    padding-inline: 1.25rem;
  }
  .vakmens-hero {
    padding-bottom: 2rem;
  }
  .vakmens-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .vakmens-hero-cta .landing-btn {
    width: 100%;
    justify-content: center;
  }
}

/* "Ook voor andere vakmensen" sibling cross-link cluster (SEO topic cluster).
   Injected by scripts/inject-vakmens-siblings.mjs into every voor-<vak> page. */
.vakmens-siblings {
  padding: 2rem 0 3rem;
}
.vakmens-siblings h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}
.vakmens-sibling-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.vakmens-sibling-links a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--landing-border, #eef1f5);
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--landing-text, #2a3947);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}
.vakmens-sibling-links a:hover {
  border-color: var(--vk-accent);
  color: var(--vk-accent);
  background: var(--vk-accent-soft);
}