/* HOG Juridisch: voorwaarden, privacy, klachten en herroeping in de huisstijl van Holland Opleidingen Groep. */
.hog-juridisch {
	--hj-blauw: #1e4584;
	--hj-blauw-zacht: #eef2f8;
	--hj-oranje: #ea6936;
	--hj-groen: #49aa51;
	--hj-grijs: #e4e4e4;
	--hj-tekst: #4a4a4a;
	--hj-licht: #767676;
	max-width: 920px;
	margin: 0 auto;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--hj-tekst);
	overflow-wrap: break-word;
}
.hog-juridisch *,
.hog-juridisch *::before,
.hog-juridisch *::after { box-sizing: border-box; }

/* Balk met versie en PDF */
.hj-balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 14px 18px;
	margin: 0 0 32px;
	background: var(--hj-blauw-zacht);
	border-radius: 8px;
}
.hog-juridisch .hj-balk__tekst { margin: 0; color: var(--hj-blauw); font-weight: 500; line-height: 1.4; }
.hj-balk__label {
	display: inline-block;
	margin-right: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hj-oranje);
}

/* Knoppen */
.hog-juridisch a.hj-knop,
.hog-juridisch .hj-knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 6px;
	background: var(--hj-blauw);
	color: #fff;
	font: 600 15px/1.2 Roboto, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.hog-juridisch a.hj-knop { text-decoration: none; }
.hog-juridisch .hj-knop:hover,
.hog-juridisch .hj-knop:focus-visible { background: var(--hj-oranje); color: #fff; text-decoration: none; }
.hog-juridisch .hj-knop:focus-visible { outline: 3px solid rgba(234, 105, 54, .35); outline-offset: 2px; }
.hog-juridisch .hj-knop--groot { padding: 14px 26px; font-size: 16px; }

/* Lopende tekst */
.hj-tekst > :first-child { margin-top: 0; }
.hog-juridisch .hj-intro { font-size: 18px; line-height: 1.6; color: var(--hj-blauw); font-weight: 500; margin: 0 0 6px; }
.hog-juridisch .hj-versie { font-size: 14px; color: var(--hj-licht); font-style: italic; margin: 0 0 28px; }
.hog-juridisch h2 {
	margin: 40px 0 14px;
	padding: 8px 0 8px 16px;
	border-left: 4px solid var(--hj-oranje);
	background: linear-gradient(90deg, var(--hj-blauw-zacht), rgba(238, 242, 248, 0));
	font: 600 22px/1.3 Roboto, sans-serif;
	color: var(--hj-blauw);
	scroll-margin-top: 120px;
}
.hog-juridisch p { margin: 0 0 14px; }
.hog-juridisch a { color: var(--hj-blauw); text-decoration: underline; text-underline-offset: 2px; }
.hog-juridisch a:hover { color: var(--hj-oranje); }
.hog-juridisch strong { color: var(--hj-blauw); font-weight: 600; }

.hog-juridisch ol.hj-lijst,
.hog-juridisch ul { margin: 0 0 16px; padding-left: 26px; }
.hog-juridisch ol.hj-lijst > li { margin: 0 0 10px; padding-left: 4px; }
.hog-juridisch ol.hj-lijst > li::marker { color: var(--hj-blauw); font-weight: 600; }
.hog-juridisch ol.hj-lijst ol.hj-lijst { list-style-type: lower-alpha; margin: 8px 0 4px; }
.hog-juridisch ol.hj-lijst ol.hj-lijst > li { margin-bottom: 4px; }
.hog-juridisch ul > li { margin: 0 0 6px; }
.hog-juridisch ul > li::marker { color: var(--hj-oranje); }

/* Definities */
.hog-juridisch dl.hj-def {
	display: grid;
	grid-template-columns: minmax(170px, 240px) 1fr;
	margin: 0 0 20px;
	border-top: 1px solid var(--hj-grijs);
}
.hog-juridisch dl.hj-def dt,
.hog-juridisch dl.hj-def dd { margin: 0; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hj-grijs); }
.hog-juridisch dl.hj-def dt { font-weight: 600; color: var(--hj-blauw); }
.hog-juridisch dl.hj-def dd ol.hj-lijst { margin-top: 8px; }

/* Tabellen */
.hog-juridisch table.hj-tabel {
	width: 100%;
	margin: 8px 0 22px;
	border-collapse: collapse;
	border: 0;
	font-size: 15px;
	line-height: 1.55;
}
.hog-juridisch table.hj-tabel th,
.hog-juridisch table.hj-tabel td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--hj-grijs);
	text-align: left;
	vertical-align: top;
	background: transparent;
}
.hog-juridisch table.hj-tabel th {
	color: var(--hj-blauw);
	font-weight: 600;
	border-bottom: 2px solid var(--hj-blauw);
}
.hog-juridisch table.hj-tabel--gegevens td:first-child { width: 36%; font-weight: 600; color: var(--hj-blauw); }

/* Herroeping: blokken */
.hj-twee {
	display: grid;
	grid-template-columns: minmax(260px, 340px) 1fr;
	align-items: start;
	gap: 24px;
	margin: 28px 0 40px;
}
.hj-blok {
	padding: 22px 24px;
	border: 1px solid var(--hj-grijs);
	border-radius: 10px;
	background: #fff;
}
.hj-blok--adres { background: var(--hj-blauw-zacht); border-color: transparent; }
.hj-blok--adres address { font-style: normal; line-height: 1.7; }
.hj-blok__label {
	margin: 0 0 8px !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hj-oranje);
}
.hog-juridisch .hj-blok__kop { margin: 0 0 14px; padding: 0; border: 0; background: none; font-size: 20px; }
.hog-juridisch ol.hj-punten { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: hjp; }
.hog-juridisch ol.hj-punten > li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 40px;
	counter-increment: hjp;
}
.hog-juridisch ol.hj-punten > li::before {
	content: counter(hjp);
	position: absolute;
	left: 0;
	top: 1px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hj-oranje);
	color: #fff;
	font: 700 13px/26px Roboto, sans-serif;
	text-align: center;
}
.hog-juridisch ol.hj-punten > li strong { display: block; }
.hog-juridisch .hj-klein { font-size: 14px; color: var(--hj-licht); margin: 0; }

/* Herroeping: formulier */
.hj-formulier {
	padding: 32px;
	border-radius: 12px;
	background: #f6f6f6;
	scroll-margin-top: 120px;
}
.hog-juridisch .hj-formulier__kop { margin-top: 0; }
.hog-juridisch .hj-verklaring { font-style: italic; color: var(--hj-blauw); }
.hj-velden {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
	margin: 18px 0 22px;
}
.hj-veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hj-veld--vol { grid-column: 1 / -1; }
.hog-juridisch .hj-veld label { font-weight: 600; color: var(--hj-blauw); font-size: 15px; }
.hog-juridisch .hj-verplicht { color: var(--hj-oranje); }
.hog-juridisch .hj-optioneel { font-weight: 400; color: var(--hj-licht); font-size: 14px; }
.hog-juridisch .hj-veld input,
.hog-juridisch .hj-veld textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #cfd5df;
	border-radius: 6px;
	background: #fff;
	color: #222;
	font: 400 16px/1.4 Roboto, sans-serif;
	box-shadow: none;
}
.hog-juridisch .hj-veld input:focus,
.hog-juridisch .hj-veld textarea:focus {
	border-color: var(--hj-blauw);
	outline: 3px solid rgba(30, 69, 132, .15);
	outline-offset: 0;
}
.hog-juridisch .hj-hulp { font-size: 14px; color: var(--hj-licht); }
.hj-vinkjes { display: grid; gap: 12px; margin: 0 0 16px; }
.hog-juridisch .hj-vink { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.hog-juridisch .hj-vink input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--hj-blauw); }
.hj-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.hj-melding { padding: 16px 18px; margin: 0 0 20px; border-radius: 8px; border-left: 4px solid; background: #fff; }
.hj-melding--ok { border-color: var(--hj-groen); }
.hj-melding--ok strong { color: var(--hj-groen); display: block; margin-bottom: 4px; }
.hj-melding--fout { border-color: var(--hj-oranje); color: #8a3a17; }

@media (max-width: 767px) {
	.hog-juridisch { font-size: 15px; }
	.hog-juridisch .hj-intro { font-size: 17px; }
	.hog-juridisch h2 { font-size: 19px; margin-top: 32px; }
	.hog-juridisch dl.hj-def { grid-template-columns: 1fr; }
	.hog-juridisch dl.hj-def dt { padding-bottom: 2px; border-bottom: 0; }
	.hog-juridisch dl.hj-def dd { padding-top: 0; }
	.hog-juridisch table.hj-tabel { font-size: 14px; }
	.hog-juridisch table.hj-tabel th,
	.hog-juridisch table.hj-tabel td { padding: 8px 6px; }
	.hj-twee { grid-template-columns: 1fr; }
	.hj-formulier { padding: 22px 16px; }
	.hj-velden { grid-template-columns: 1fr; }
	.hj-balk { justify-content: flex-start; }
}
