/*
 * Publieke weergave van Flowpakketten: de compacte kaart op een flowpagina
 * ("Onderdeel van flowpakket") én de volledige pakketdetailpagina
 * (single-flow-package.php). Mobile-first, geen vaste breedtes, geen
 * horizontale scroll bij 375-430px.
 *
 * De kaart wordt binnen de_content in de detailpagina van het thema
 * gerenderd (.hc-flow-detail, zie detail-page-v4.css), dat vrij algemene
 * en !important-zware stijlen zet op h2/a/ul (bijv. alle links standaard
 * roze en onderstreept). Zonder eigen !important-overrides "erft" de kaart
 * die stijlen mee - dat gaf een onleesbare, te grote kaart (roze knoptekst
 * op roze knopachtergrond, een te grote h2). Daarom hieronder bewust
 * dezelfde !important-aanpak als de andere publieke CSS-bestanden in deze
 * map (zie bijv. .hfl-flow-download-card__button in phase-two-public.css).
 */

.hfl-package-card,
.hfl-package-detail {
	box-sizing: border-box !important;
	max-width: 100% !important;
	margin: 1.5rem 0 !important;
	padding: 1rem 1.15rem !important;
	border: 1px solid rgba(48, 179, 255, .25) !important;
	border-radius: 16px !important;
	background: #f8fbff !important;
	box-shadow: none !important;
}

/* De compacte kaart op de flowpagina mag minder verticale ruimte innemen
   dan de volledige pakketdetailpagina - vandaar deze eigen, krappere
   waarden i.p.v. de gedeelde regel hierboven. */
.hfl-package-card {
	margin: 1.1rem 0 !important;
	padding: .75rem .9rem !important;
}

.hfl-package-card *,
.hfl-package-detail * {
	box-sizing: border-box !important;
	max-width: 100% !important;
}

.hfl-package-card__eyebrow {
	margin: 0 0 .2rem !important;
	color: #168fd6 !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}

.hfl-package-card__title,
.hfl-package-detail__title {
	margin: 0 0 .3rem !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
	font-weight: 800 !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.hfl-package-card__title a,
.hfl-package-detail__back a {
	color: #17223b !important;
	text-decoration: none !important;
}

.hfl-package-card__title a:hover,
.hfl-package-card__title a:focus-visible {
	color: #168fd6 !important;
	text-decoration: underline !important;
}

.hfl-package-card__position {
	margin: 0 0 .5rem !important;
	color: #61708a !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

.hfl-package-card__flows-heading {
	margin: 0 0 .3rem !important;
	color: #17223b !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .03em !important;
}

.hfl-package-card__flows,
.hfl-package-detail__flows {
	list-style: none !important;
	margin: 0 0 .6rem !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.hfl-package-card__flow,
.hfl-package-detail__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center !important;
	gap: .4rem !important;
	padding: .35rem .55rem !important;
	border: 1px solid #e1e8f0 !important;
	border-radius: 10px !important;
	background: #fff !important;
}

.hfl-package-card__flow.is-current,
.hfl-package-detail__flow.is-current {
	background: #eef9ff !important;
	border-color: rgba(48, 179, 255, .35) !important;
}

.hfl-package-card__flow-order {
	color: #9aa7ba !important;
	font-size: 12px !important;
	font-variant-numeric: tabular-nums;
}

.hfl-package-card__flow-title,
.hfl-package-detail__flow-title {
	color: #17223b !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	word-break: break-word;
}

a.hfl-package-card__flow-title:hover,
a.hfl-package-card__flow-title:focus-visible,
a.hfl-package-detail__flow-title:hover,
a.hfl-package-detail__flow-title:focus-visible {
	color: #168fd6 !important;
	text-decoration: underline !important;
}

.hfl-package-card__badge,
.hfl-package-detail__badge {
	display: inline-block !important;
	margin-left: auto !important;
	padding: .15rem .55rem !important;
	border-radius: 999px !important;
	background: #eef1f6 !important;
	color: #3c4657 !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .02em !important;
}

.hfl-package-card__badge--required,
.hfl-package-detail__badge--required {
	background: #fef3c7 !important;
	color: #a16207 !important;
}

.hfl-package-card__badge--current,
.hfl-package-detail__badge--current {
	background: #e5edff !important;
	color: #2c50c9 !important;
}

.hfl-package-card__cta {
	margin: .5rem 0 .3rem !important;
}

.hfl-package-card__button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	min-height: 40px !important;
	padding: .6rem 1rem !important;
	border-radius: 12px !important;
	background: #30b3ff !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.hfl-package-card__button:hover,
.hfl-package-card__button:focus-visible {
	background: #159fe9 !important;
	color: #fff !important;
}

@media ( min-width: 480px ) {
	.hfl-package-card__button {
		width: auto;
	}
}

.hfl-package-card .hfl-lang-toggle,
.hfl-package-detail .hfl-lang-toggle {
	margin-top: .3rem !important;
}

/*
 * Eén centrale taalschakelaar bovenaan de flowpagina (single-flow.php),
 * voor alle tweetalige technische inhoud verderop - zie de toelichting in
 * public-flow-language.js. Zelfde pil-stijl als de vroegere schakelaars
 * per blok (phase-two-public.css), maar los van een CSS-grid-context.
 */
.hfl-lang-toggle--global {
	grid-column: auto !important;
	margin: .5rem 0 0 !important;
}

.hfl-package-detail__summary {
	margin: 0 0 .6rem !important;
	color: #61708a !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

.hfl-package-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.1rem !important;
	margin: 0 0 1rem !important;
	color: #61708a !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

.hfl-package-detail__description {
	margin: 0 0 1.1rem !important;
	color: #334155 !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
}

.hfl-package-detail__description p {
	margin: 0 0 .7rem !important;
}

/*
 * De "Terug naar het flowoverzicht"-link is het allereerste element op
 * deze pagina (single-flow-package.php), zonder de bovenmarge die
 * single-flow.php's .hc-flow-detail-wrapper al standaard heeft
 * (padding-top: 32px, zie detail-page-v4.css). Op dit thema bleek precies
 * dat ontbreken van bovenruimte de link onklikbaar te maken (waarschijnlijk
 * een vast/sticky element uit het thema zelf dat anders precies over de
 * eerste regel inhoud valt) - andere links verderop op dezelfde pagina
 * werkten wel. Dezelfde bovenmarge hier aanhouden lost dat op en houdt de
 * pakketdetailpagina consistent met de rest van de site.
 */
.hfl-package-detail-page {
	padding-top: 32px !important;
}

.hfl-package-detail__back {
	display: inline-block !important;
	position: relative !important;
	z-index: 2 !important;
	margin-bottom: 1rem !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

.hfl-package-detail__notice {
	margin: 0 0 1rem !important;
	padding: .55rem .8rem !important;
	border-radius: 10px !important;
	background: #fff3e0 !important;
	color: #a15c00 !important;
	font-size: 13px !important;
}

.hfl-package-detail__depends {
	margin-left: .3rem !important;
	color: #61708a !important;
	font-size: 12px !important;
}