/* ==========================================================================
   MIEDEMA ASSISTANCE — STICKY CTA (drijvende pill, scroll-getriggerd)
   /assets/css/ma-sticky-cta.css

   Drijvende pill onderaan het scherm op vacature-archive en single-pagina's.
   Frosted glass + subtiele rand, scherpe hoeken, scroll-fade in.

   Markup-pattern:
	 ARCHIVE:
	   <div class="ma-sticky-cta">
		 <div class="ma-sticky-cta-info">
		   <span class="ma-sticky-cta-title">…</span>
		   <span class="ma-sticky-cta-sub">…</span>
		 </div>
		 <a class="ma-btn ma-btn-primary ma-btn-sm">Meld je aan</a>
	   </div>

	 SINGLE — sub bevat 3 link-children in flex-rij:
	   <div class="ma-sticky-cta">
		 <div class="ma-sticky-cta-info">
		   <span class="ma-sticky-cta-title">…</span>
		   <div class="ma-sticky-cta-sub">
			 <a>← Vorige</a>
			 <a>Overzicht</a>
			 <a>Volgende →</a>
		   </div>
		 </div>
		 <a class="ma-btn ma-btn-primary ma-btn-sm">Meld je aan</a>
	   </div>

   Dependencies: ma-root.css, ma-hero.css (voor .ma-btn / .ma-btn-sm)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PILL — drijvend onderaan, gecentreerd, hidden by default
   -------------------------------------------------------------------------- */

.ma-sticky-cta {
  position: fixed;
  inset-block-end: clamp(0.85rem, 2vw, 1.25rem);
  inset-inline-start: 50%;
  z-index: var(--ma-z-sticky);

  inline-size: min(92%, 540px);

  background-color: color-mix(in srgb, var(--ma-surface-inverse) 88%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--ma-white) 14%, transparent);

  padding-block:   clamp(0.45rem, 1vw, 0.6rem);
  padding-inline:  clamp(0.45rem, 1vw, 0.6rem);
  padding-inline-start: clamp(1rem, 2.5vw, 1.5rem);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.6rem, 1.5vw, 1rem);

  transform: translateX(-50%) translateY(calc(100% + 1.5rem));
  opacity: 0;
  pointer-events: none;

  transition:
	transform 0.5s var(--ma-ease),
	opacity   0.5s var(--ma-ease);
}

.ma-sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ma-sticky-cta,
.ma-sticky-cta *,
.ma-sticky-cta *::before,
.ma-sticky-cta *::after {
  border-radius: 0 !important;
}


/* --------------------------------------------------------------------------
   2. INFO-BLOK — titel + sub gestapeld
   -------------------------------------------------------------------------- */

.ma-sticky-cta-info {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1 1 0;
}

.ma-sticky-cta-title {
  display: block;
  font-size: var(--ma-text-sm);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-body);
  line-height: 1.25;
  color: var(--ma-white);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* --------------------------------------------------------------------------
   3. SUB — flex-rij voor inline tekst (archive) of nav-links (single)
   -------------------------------------------------------------------------- */

.ma-sticky-cta-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px clamp(0.5rem, 1.2vw, 0.85rem);

  margin-block-start: 0.15rem;

  font-size: var(--ma-text-2xs);
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ma-white) 65%, transparent);
}


/* --------------------------------------------------------------------------
   4. SUB-LINKS — gegarandeerd zichtbaar via specifieke selector
   --------------------------------------------------------------------------
   Specificiteit 0,1,1 — wint van:
	 - globale `a { color: var(--ma-link) }` regel  (0,0,1)
	 - GBP's per-block class-rule  (0,1,0)

   Daarom hard op var(--ma-accent) gezet — deze is altijd gedefinieerd in
   ma-root.css en hangt niet af van GeneratePress-customizer state. Alle
   drie de sub-links (Vorige, Overzicht, Volgende) krijgen dezelfde groene
   default. Op hover/focus → wit voor visuele feedback.
   -------------------------------------------------------------------------- */

.ma-sticky-cta-sub a,
.ma-sticky-cta-sub a:link,
.ma-sticky-cta-sub a:visited {
  color: var(--ma-accent);

  text-decoration: none;
  font-weight: var(--ma-weight-medium);
  white-space: nowrap;
  transition: color var(--ma-duration-fast) var(--ma-ease);
}

.ma-sticky-cta-sub a:is(:hover, :focus-visible) {
  color: var(--ma-white);
}

/* Disabled state (eerste/laatste vacature) */
.ma-sticky-cta-sub a[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   5. CTA-KNOP rechts
   -------------------------------------------------------------------------- */

.ma-sticky-cta .ma-btn {
  flex-shrink: 0;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. MOBIEL — kleinere padding + compactere typografie
   -------------------------------------------------------------------------- */

@media (max-width: 47.9375em) {
  .ma-sticky-cta {
	padding-inline-start: clamp(0.85rem, 3vw, 1rem);
  }

  .ma-sticky-cta-title {
	font-size: var(--ma-text-xs);
  }

  .ma-sticky-cta-sub {
	font-size: var(--ma-text-3xs);
  }
}


/* --------------------------------------------------------------------------
   7. INTERACTIE MET HOOFDMENU-OVERLAY
   -------------------------------------------------------------------------- */

body:has(.ma-header-toggle[aria-expanded="true"]) .ma-sticky-cta {
  transform: translateX(-50%) translateY(calc(100% + 1.5rem)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* --------------------------------------------------------------------------
   8. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ma-sticky-cta {
	transition: opacity 0.2s linear;
  }
}