/**
 * Flex Recruit – single vacancy detail page (frs-*), sticky bar, reading progress
 * Part of the per-feature CSS split. Loaded conditionally by Plugin::enqueue_frontend_assets().
 */

/* ── Job Details Box (single vacancy) ─────────────────────── */
.job-details-box {
	background:    var(--fr-bg);
	border:        1px solid var(--fr-border);
	border-radius: calc(var(--fr-radius) + 2px);
	padding:       1.25rem;
	margin-bottom: 1.5rem;
}

.job-details-title {
	font-size:     1rem;
	font-weight:   700;
	color:         var(--fr-dark);
	margin:        0 0 .85rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--fr-primary);
}

.job-detail-item {
	display:     flex;
	align-items: center;
	gap:         .5rem;
	font-size:   .9rem;
	color:       var(--fr-text);
	margin-bottom: .55rem;
}

.job-detail-item .dashicons {
	color:     var(--fr-primary);
	font-size: 1.1rem;
	width:     1.1rem;
	height:    1.1rem;
	flex-shrink: 0;
}

.solliciteer-button {
	margin-top: 1rem;
	width:      100%;
	justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   Flex Recruit – Single Vacancy Page — Elite Edition
   ══════════════════════════════════════════════════════════════ */

.frs-container {
	max-width:     1100px;
	margin:        0 auto;
	padding-left:  1.25rem;
	padding-right: 1.25rem;
}

/* ── Back link ────────────────────────────────────────────────── */
.frs-topbar { padding: .85rem 0 0; }
.frs-back-link {
	display:         inline-flex;
	align-items:     center;
	gap:             .35rem;
	color:           var(--fr-text-light);
	font-size:       .82rem;
	font-weight:     600;
	text-decoration: none;
	transition:      color var(--fr-transition);
}
.frs-back-link:hover { color: var(--fr-primary); }
.frs-back-link .dashicons { font-size: .95rem; width: .95rem; height: .95rem; }

/* ── Title block ──────────────────────────────────────────────── */
.frs-title-block { padding: .75rem 0 0; }

/* Category / type badges above title */
.frs-title-badges {
	display:   flex;
	flex-wrap: wrap;
	gap:       .4rem;
	margin-bottom: .65rem;
}
.frs-badge {
	display:        inline-flex;
	align-items:    center;
	padding:        .25rem .75rem;
	border-radius:  99px;
	font-size:      .72rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .07em;
}
.frs-badge--category {
	background: color-mix(in srgb, var(--fr-primary) 12%, #fff);
	color:      var(--fr-primary);
	border:     1px solid color-mix(in srgb, var(--fr-primary) 30%, transparent);
}
.frs-badge--type {
	background: color-mix(in srgb, var(--fr-dark) 8%, #fff);
	color:      var(--fr-dark);
	border:     1px solid color-mix(in srgb, var(--fr-dark) 20%, transparent);
}
.frs-badge--new {
	background: #fff3cd;
	color:      #856404;
	border:     1px solid #f0c040;
}

.frs-title {
	font-size:   clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	color:       var(--fr-dark);
	margin:      0 0 1.25rem;
}

/* ── Inline meta row ──────────────────────────────────────────── */
.frs-meta-row {
	display:       flex;
	flex-wrap:     wrap;
	gap:           0;
	margin-bottom: .5rem;
	border:        1px solid var(--fr-border);
	border-radius: 10px;
	overflow:      hidden;
}
.frs-meta-cell {
	display:        flex;
	flex-direction: column;
	gap:            .15rem;
	padding:        .65rem 1.1rem;
	border-right:   1px solid var(--fr-border);
	flex:           1 1 auto;
}
.frs-meta-cell:last-child { border-right: none; }
.frs-meta-cell__label {
	display:        flex;
	align-items:    center;
	gap:            .3rem;
	font-size:      .62rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color:          var(--fr-text-light);
}
.frs-meta-cell__label .dashicons {
	font-size:  .85rem;
	width:      .85rem;
	height:     .85rem;
	color:      var(--fr-primary);
	flex-shrink: 0;
}
.frs-meta-cell__value {
	font-size:   .95rem;
	font-weight: 700;
	color:       var(--fr-dark);
}
.frs-meta-cell__value--accent {
	color: var(--fr-primary);
}

/* Mobile chips (legacy — replaced by frs-mobile-meta grid) */
.frs-mobile-chips { display: none; }
.frs-mchip {
	display:      inline-flex;
	align-items:  center;
	gap:          .35rem;
	background:   var(--fr-dark);
	color:        #fff;
	padding:      .38rem .85rem;
	border-radius: 99px;
	font-size:    .8rem;
	font-weight:  600;
}
.frs-mchip--salary { background: var(--fr-primary); }
.frs-mchip--muted  { background: var(--fr-bg); color: var(--fr-text-light); border: 1px solid var(--fr-border); }
.frs-mchip--muted .dashicons { color: var(--fr-text-light); }
.frs-mchip .dashicons { font-size: .85rem; width: .85rem; height: .85rem; opacity: .8; }

/* ── Two-column grid ─────────────────────────────────────────── */
.frs-body {
	display:               grid;
	grid-template-columns: 1fr 300px;
	grid-template-areas:   "main sidebar";
	gap:                   3rem;
	padding-top:           2.5rem;
	padding-bottom:        3rem;
	align-items:           start;
}
.frs-main { grid-area: main; }

/* ── Content sections ─────────────────────────────────────────── */
.frs-section { margin-bottom: 2.75rem; }
.frs-section:last-of-type { margin-bottom: 0; }

.frs-section__title {
	display:       flex;
	align-items:   center;
	gap:           .75rem;
	font-size:     1.15rem;
	font-weight:   700;
	color:         var(--fr-dark);
	margin:        0 0 1.25rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--fr-border);
}

.frs-section__num {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	width:          28px;
	height:         28px;
	background:     var(--fr-primary);
	color:          #fff;
	border-radius:  6px;
	font-size:      .72rem;
	font-weight:    800;
	letter-spacing: .03em;
	flex-shrink:    0;
}

/* ── Prose ────────────────────────────────────────────────────── */
.frs-prose {
	color:       var(--fr-text);
	line-height: 1.85;
	font-size:   1rem;
}
.frs-prose > *:first-child { margin-top: 0; }
.frs-prose > *:last-child  { margin-bottom: 0; }
.frs-prose p  { margin: 0 0 1rem; }
.frs-prose ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.frs-prose ul li {
	padding:  .2rem 0 .2rem 1.3rem;
	position: relative;
	line-height: 1.6;
}
.frs-prose ul li::before {
	content:      '';
	position:     absolute;
	left:         0;
	top:          .55em;
	width:        7px;
	height:       7px;
	background:   var(--fr-primary);
	border-radius: 50%;
}
.frs-prose ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.frs-prose strong { color: var(--fr-dark); font-weight: 700; }
.frs-prose h3, .frs-prose h4 { color: var(--fr-dark); margin: 1.5rem 0 .6rem; font-weight: 700; }

/* ── Benefits grid ────────────────────────────────────────────── */
.frs-benefits-grid {
	display:   grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap:       1rem;
}
.frs-benefit-card {
	background:     #fff;
	border:         1px solid var(--fr-border);
	border-left:    3px solid var(--fr-primary);
	border-radius:  10px;
	padding:        1rem 1.1rem;
	display:        flex;
	flex-direction: row;
	align-items:    center;
	gap:            .85rem;
	box-shadow:     0 2px 8px -4px rgba(10,20,35,.07);
	transition:     box-shadow var(--fr-transition), transform var(--fr-transition), border-color var(--fr-transition);
}
.frs-benefit-card:hover {
	box-shadow:        0 6px 20px -4px rgba(10,20,35,.13);
	transform:         translateY(-2px);
	border-left-color: var(--fr-primary-dark);
}
.frs-benefit-icon {
	color:       var(--fr-primary);
	font-size:   1.5rem;
	width:       1.5rem;
	height:      1.5rem;
	flex-shrink: 0;
}
.frs-benefit-text {
	font-size:   .9rem;
	font-weight: 600;
	color:       var(--fr-dark);
	margin:      0;
	line-height: 1.4;
}

/* Mobile apply/consultant/share */
.frs-mobile-apply,
.frs-mobile-consultant,
.frs-mobile-share { display: none; }
.frs-mobile-meta { display: none; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.frs-sidebar {
	grid-area:      sidebar;
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
	position:       sticky;
	top:            2rem;
}

/* ── Cards ───────────────────────────────────────────────────── */
.frs-card {
	background:    #fff;
	border:        1px solid var(--fr-border);
	border-radius: 14px;
	padding:       1.35rem;
	box-shadow:    0 4px 20px -6px rgba(10,20,35,.08);
}
.frs-card--cta {
	background:     var(--fr-dark);
	border-color:   transparent;
	padding:        1.5rem;
	display:        flex;
	flex-direction: column;
	gap:            .6rem;
}
.frs-card--cta::before {
	content:        'Klaar om te solliciteren?';
	display:        block;
	font-size:      .62rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color:          rgba(255,255,255,.4);
}
.frs-card__title {
	font-size:      .68rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color:          var(--fr-primary);
	margin:         0 0 1.1rem;
}
.frs-card--cta .frs-apply-btn,
.frs-apply-btn.frs-apply-btn {
	width:           100%;
	justify-content: space-between;
	font-size:       .95rem;
	font-weight:     600;
	padding:         .85rem 1.1rem;
	border-radius:   8px;
	background:      #fff;
	color:           var(--fr-dark);
	border:          none;
	letter-spacing:  .01em;
	box-shadow:      none;
	transition:      background var(--fr-transition), color var(--fr-transition);
	gap:             1rem;
}
.frs-card--cta .frs-apply-btn:hover,
.frs-apply-btn.frs-apply-btn:hover {
	background: rgba(255,255,255,.88);
	color:      var(--fr-dark);
}
.frs-apply-btn:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(255,255,255,.5);
}
.frs-apply-btn .dashicons {
	transition: transform .2s ease;
}
.frs-apply-btn:hover .dashicons {
	transform: translateX(3px);
}

/* ── Detail list ─────────────────────────────────────────────── */
.frs-detail-list { list-style: none; margin: 0; padding: 0; }
.frs-detail-item {
	display:     flex;
	align-items: flex-start;
	gap:         .8rem;
	font-size:   .9rem;
	color:       var(--fr-text);
	padding:     .7rem 0;
	border-bottom: 1px solid var(--fr-bg);
}
.frs-detail-item:last-child { border-bottom: none; }
.frs-detail-icon { color: var(--fr-primary); font-size: 1.15rem; width: 1.15rem; height: 1.15rem; margin-top: .05rem; flex-shrink: 0; }
.frs-detail-item strong {
	display:        block;
	font-size:      .68rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color:          var(--fr-text-light);
	margin-bottom:  .2rem;
}

/* ── Consultant sidebar ──────────────────────────────────────── */
.frs-sidebar .fcw { max-width: 100%; border-radius: 14px; }

/* ── Share ───────────────────────────────────────────────────── */
.frs-card--share .frs-card__title { margin-bottom: .75rem; }
.frs-share-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.frs-share-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .4rem;
	padding:         .5rem .95rem;
	border-radius:   8px;
	font-size:       .82rem;
	font-weight:     700;
	text-decoration: none;
	color:           #fff;
	transition:      filter var(--fr-transition), transform 60ms ease;
}
.frs-share-btn:hover  { filter: brightness(1.12); color: #fff; }
.frs-share-btn:active { transform: translateY(1px); }
.frs-share-btn--linkedin { background: #0a66c2; }
.frs-share-btn--whatsapp { background: #25d366; }
.frs-share-btn--email    { background: var(--fr-dark); }
.frs-share-btn .dashicons { font-size: 1rem; width: 1rem; height: 1rem; }

/* ══════════════════════════════════════════════════════════════
   MOBILE ≤ 860px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

	.frs-meta-row { display: none; }

	/* Hide badges on mobile — meta grid covers same info */
	.frs-title-badges { display: none; }

	.frs-title { font-size: 1.45rem; margin-bottom: .75rem; }

	/* Mobile meta grid — 2-col labelled cells, matches desktop meta row */
	.frs-mobile-meta {
		display:               grid;
		grid-template-columns: 1fr 1fr;
		border:                1px solid var(--fr-border);
		border-radius:         10px;
		overflow:              hidden;
		margin-bottom:         1.25rem;
	}
	.frs-mobile-meta__cell {
		display:        flex;
		flex-direction: column;
		gap:            .2rem;
		padding:        .65rem .85rem;
		border-right:   1px solid var(--fr-border);
		border-bottom:  1px solid var(--fr-border);
		background:     #fff;
	}
	.frs-mobile-meta__cell:nth-child(2n)        { border-right: none; }
	.frs-mobile-meta__cell:nth-last-child(-n+2) { border-bottom: none; }
	.frs-mobile-meta__cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
	.frs-mobile-meta__label {
		font-size:      .6rem;
		font-weight:    700;
		text-transform: uppercase;
		letter-spacing: .1em;
		color:          var(--fr-text-light);
	}
	.frs-mobile-meta__value {
		display:     flex;
		align-items: center;
		gap:         .3rem;
		font-size:   .88rem;
		font-weight: 700;
		color:       var(--fr-dark);
	}
	.frs-mobile-meta__value .dashicons { color: var(--fr-primary); font-size: .95rem; width: .95rem; height: .95rem; flex-shrink: 0; }
	.frs-mobile-meta__value--accent    { color: var(--fr-primary); }

	.frs-body {
		grid-template-columns: 1fr;
		grid-template-areas:   "main";
		gap:          1.25rem;
		padding-top:  1rem;
		padding-bottom: 5rem;
	}
	.frs-sidebar { display: none; }

	.frs-mobile-apply      { display: block; margin: 1.5rem 0; }
	.frs-mobile-consultant { display: block; margin-top: 1.5rem; }
	.frs-mobile-share      { display: block; margin-top: 1.25rem; }

	.frs-mobile-apply .frs-apply-btn { width: 100%; justify-content: center; font-size: 1rem; padding: .9rem 1.25rem; }
	.frs-mobile-consultant .fcw { max-width: 100%; border-radius: 12px; }
	.frs-mobile-share__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--fr-primary); margin: 0 0 .65rem; }

	.frs-benefits-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
	.frs-benefits-grid { grid-template-columns: 1fr; }
}

/* ── Mobile sticky bar ────────────────────────────────────────── */
.frs-sticky-apply {
	display:     none;
	position:    fixed;
	bottom:      0;
	left:        0;
	right:       0;
	z-index:     9000;
	background:  var(--fr-dark);
	padding:     .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
	box-shadow:  0 -4px 20px rgba(0,0,0,.2);
	transform:   translateY(100%);
	transition:  transform .3s ease, opacity .3s ease;
	opacity:     0;
}
.frs-sticky-apply.is-visible { display: block; transform: translateY(0); opacity: 1; }
.frs-sticky-apply__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 600px; margin: 0 auto; }
.frs-sticky-apply__info { display: flex; flex-direction: column; gap: .1rem; overflow: hidden; flex: 1; }
.frs-sticky-apply__title { color: #fff; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frs-sticky-apply__meta  { color: var(--fr-accent); font-size: .75rem; }
.frs-sticky-apply__btn {
	flex-shrink:   0;
	padding:       .55rem 1.25rem;
	font-size:     .9rem;
	font-weight:   700;
	border:        none;
	border-radius: 8px;
	background:    var(--fr-primary);
	color:         #fff;
	cursor:        pointer;
	transition:    background var(--fr-transition);
}
.frs-sticky-apply__btn:hover { background: var(--fr-primary-dark); color: #fff; }

@media (max-width: 860px) { .frs-sticky-apply { display: block; } }

/* ── Reading progress bar ─────────────────────────────────── */
#frs-progress-bar {
	position:   fixed;
	top:        0;
	left:       0;
	width:      0%;
	height:     3px;
	background: linear-gradient(90deg, var(--fr-primary), var(--fr-accent));
	z-index:    9999;
	transition: width .1s linear;
	border-radius: 0 2px 2px 0;
}

/* ── Reading time on detail page ──────────────────────────── */
.frs-reading-time {
	display:     inline-flex;
	align-items: center;
	gap:         .3rem;
	font-size:   .8rem;
	color:       var(--fr-text-light);
	margin-top:  .5rem;
	font-weight: 500;
}
.frs-reading-time .dashicons {
	font-size: .9rem;
	width:     .9rem;
	height:    .9rem;
}