/*
 * Typography — Landal design system.
 * Mobile first: smaller sizes below 48em where the system defines them.
 */

body {
	font-family: var(--font-base);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-regular);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------- Headings (brand serif, weight 400, sentence case) ---------- */
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
	font-family: var(--font-brand);
	font-weight: var(--fw-regular);
	color: var(--ink);
	margin: 0 0 var(--space-20);
	text-wrap: balance;
}

/*
 * Slightly heavier brand titles. Only PP Hatton Medium is available, so a thin outline in
 * the text colour thickens the letters (scales with the font size). Remove when a bolder
 * Hatton cut is licensed.
 */
:is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-mega, .display-alpha, .section-title) {
	-webkit-text-stroke: .025em currentColor;
	paint-order: stroke fill;
}

h1, .h1 { font-size: var(--fs-heading-1-sm); line-height: var(--lh-heading-1-sm); }
h2, .h2 { font-size: var(--fs-heading-2);    line-height: var(--lh-heading-2); }
h3, .h3 { font-size: var(--fs-heading-3);    line-height: var(--lh-heading-3); }
h4, .h4 { font-size: var(--fs-heading-4);    line-height: var(--lh-heading-4); margin-bottom: var(--space-10); }
h5, .h5 { font-size: var(--fs-heading-5);    line-height: var(--lh-heading-5); margin-bottom: var(--space-10); }

/* h6: Inter bold heading, as used for component titles after the refresh. */
h6, .h6, .heading-inter {
	font-family: var(--font-base);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-bold);
	color: var(--ink);
	margin: 0 0 var(--space-10);
}

@media (min-width: 48em) {
	h1, .h1 { font-size: var(--fs-heading-1); line-height: var(--lh-heading-1); }
}

/* ---------- Display ---------- */
.display-mega,
.display-alpha {
	font-family: var(--font-brand);
	font-weight: var(--fw-regular);
	margin: 0 0 var(--space-20);
	text-wrap: balance;
}

.display-mega  { font-size: var(--fs-display-mega-sm); line-height: var(--lh-display-mega-sm); }
.display-alpha { font-size: var(--fs-display-alpha);   line-height: var(--lh-display-alpha); }

@media (min-width: 48em) {
	.display-mega { font-size: var(--fs-display-mega); line-height: var(--lh-display-mega); }
}

/* Centred teal section heading ("Altijd up-to-date"). Only at 24px+. */
.section-title {
	font-family: var(--font-brand);
	font-weight: var(--fw-regular);
	font-size: var(--fs-heading-1-sm);
	line-height: var(--lh-heading-1-sm);
	color: var(--brand);
	text-align: center;
	margin: 0 0 var(--space-30);
}

@media (min-width: 48em) {
	.section-title { font-size: var(--fs-heading-1); line-height: var(--lh-heading-1); }
}

/* Titles over photography. */
.on-photo,
.on-photo :is(h1, h2, h3, h4, h5, .display-mega, .display-alpha) { color: var(--sand); }

/* ---------- Text ---------- */
p {
	margin: 0 0 var(--space-20);
	line-height: var(--lh-body-long);
}

.entry__content :is(ul, ol) { line-height: var(--lh-body-long); margin: 0 0 var(--space-20); padding-left: var(--space-20); }

strong, b { font-weight: var(--fw-bold); }

small, .text-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.text-label     { font-size: var(--fs-label);   line-height: var(--lh-label); font-weight: var(--fw-bold); }
.caption        { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.micro          { font-size: var(--fs-micro);   line-height: var(--lh-micro); }
.text-muted     { color: var(--drab); }

/* Uppercase is reserved for small promo labels. */
.promo-label {
	font-family: var(--font-brand);
	font-size: var(--fs-caption);
	line-height: 18px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ---------- Links ---------- */
a {
	color: var(--brand-websafe);
	text-underline-offset: 2px;
	transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--brand-hover); }

/* ---------- Misc ---------- */
blockquote {
	margin: 0 0 var(--space-20);
	padding-left: var(--space-20);
	border-left: 3px solid var(--brand);
	font-family: var(--font-brand);
	font-size: var(--fs-heading-4);
	line-height: var(--lh-heading-4);
}

hr { border: 0; border-top: 1px solid var(--soft); margin: var(--space-40) 0; }

::selection { background: var(--sentiment-info); color: var(--ink); }