:root {
}

html {
	height: 100%;
	font-size: 62.5%;
}

body { 
    font-family: var(--font-macan);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -.03em;
    font-variant-ligatures: none;

	font-size: 1.6rem;
    line-height: 150%;
}


/* letter-spacing erft als berekende px-waarde en niet als em, dus moet elke
   afwijkende tekstgrootte hem zelf opnieuw declareren. */
.sq-body--small,
p.sq-body--small,
.sq-body--small p {
  letter-spacing: -0.02em;
  font-size: 1.4rem;
  line-height: 175%;
}

.sq-body--large,
p.sq-body--large,
.sq-body--large p {
  letter-spacing: -0.03em;
  font-size: max(2.2rem, min(2.05rem + 0.25vw, 2.4rem));
  line-height: 150%;
}



/* Het kopmenu levert echte <h2> en <h3>, die hun maat hiervandaan krijgen. Let op:
   dit is nog de generieke clamp-schaal van het vorige thema, niet de Sqills-schaal
   uit _sqills_global.css. */
h1, h2, h3 {
    font-family: var(--font-macan);
    font-weight: 500;
}

/* Herhaalt de reboot-regelhoogte van Bootstrap, dat bewust niet als editor style
   meelaadt: zonder deze regel erft een kop in het invoerveld de 150% van body en
   loopt een kop van twee regels over zichzelf heen. Op de voorkant verandert er
   niets, want daar staat dezelfde waarde al. */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
}
h1 {
	font-size: clamp(3.5rem, 6vw, 5rem);
	margin-bottom: 1rem;
}
h2 {
	font-size: clamp(3rem, 6vw, 5rem);
	margin-bottom: 1rem;
}
h3 {
	font-size: clamp(2.5rem, 6vw, 3rem);
	margin-bottom: 1rem;
}
h4 {
	font-size: clamp(2rem, 6vw, 2.5rem);
	margin-bottom: 1rem;
}

blockquote {
}
blockquote p {
}
blockquote p + p {
	margin-top: var(--standaard-margin-bottom);
}


/* Invoerveld van de editor: alles hieronder staat onder .mce-content-body en geldt
   dus alleen binnen de TinyMCE-iframe. De opmaak zelf komt uit _sqills_global.css
   en style.css, die als editor style meeladen; hier staat alleen de context die het
   invoerveld mist. */

/* Het invoerveld mist de .sq-rich-text-wrapper die het sjabloon om de content zet;
   deze regels nemen de tussenruimte daarvan over. */
.mce-content-body > * {
	margin-bottom: 0;
}

.mce-content-body > * + * {
	margin-top: 3.2rem;
}

.mce-content-body > :where(h1, h2, h3, h4, h5, h6) + * {
	margin-top: 1.6rem;
}

/* .sq-rich-text p krijgt de supportkleur. */
.mce-content-body > p {
	color: var(--text-color--support);
}

/* Het invoerveld is smaller dan de sectie op de site; breken voorkomt dat een
   grote kop het veld horizontaal laat scrollen. */
.mce-content-body {
	overflow-wrap: break-word;
}


/* Tablet */
@media (min-width: 992px) {
	h1 {
		margin-bottom: 3.2rem;
	}
}