/**
 * CTXR — leesbaarheid op mobiel, site-breed (op verzoek)
 *
 * Geladen vanuit theme/snippets/meta.php, dus op elke pagina, vóór de stijl van
 * de pagina zelf. Alleen op schermen tot 640px (en waar genoemd tot 768px of 860px).
 * Doel: kleine tekst die op een telefoon te klein werd, nu minimaal ~15-16px.
 *
 * De homepage heeft zijn eigen blok in theme/templates/nl/home.php (.page-home-v2)
 * en blijft dat; deze laag geldt voor de andere pagina's. Elke selector staat met
 * "html body" ervoor, zodat hij wint van de kleine maten in de inline <style>
 * van de pagina-templates en de secties.
 *
 * Bewust NIET aangepast: de knoppen op de 3D-kubus (ze staan op vlakken die
 * anders gaan afsnijden), en de UI-mockups (CMS-, formulier- en chatvensters en
 * de lane-diagrammen), omdat die als illustratie een vaste opmaak hebben.
 */
@media (max-width: 640px) {
	/* keywords (pills) onder de hero en de uitlegballon die aan de body hangt */
	html body .hero-tags-list { font-size: 1rem; }
	html body .hero-tip { font-size: 1rem; }

	/* nieuwsbalk: titels mogen op twee regels */
	html body .latest-news-bar-inner { flex-wrap: wrap; }
	html body .latest-news-bar a { font-size: 1rem; white-space: normal; overflow: visible; text-overflow: clip; }

	/* kleine labels boven koppen */
	html body .kicker,
	html body .pf-kicker { font-size: .95rem; }

	/* datums en meta-regels bij artikelen, nieuws en portfolio */
	html body .article-date,
	html body .news-row-text time,
	html body .pf-row-text .pf-meta { font-size: .95rem; }

	/* prijskaarten: lijstjes, tagline en de toelichting bij de prijs */
	html body .tier > ul > li,
	html body .tier .tagline { font-size: 1rem; }
	html body .tier .price > small { font-size: .55em; }
	html body .tier-note { font-size: .95rem !important; }

	/* citaten, toelichtingen en de terugknop op het portfolio */
	html body .quote-author { font-size: 1rem; }
	html body .plan-note { font-size: .95em !important; }
	html body .pj-back { font-size: 1rem; }

	/* label 'gecertificeerd' op een beeld */
	html body figure > span.certified > span { font-size: .95rem; }

	/* artikelen: bijschrift onder een beeld in de tekst */
	html body .article-inline-image figcaption { font-size: .95rem; }

	/* handleiding */
	html body .page-manual .ms-note,
	html body .page-manual .ms-where,
	html body .page-manual .ms-answer-title,
	html body .page-manual .ms-gh .ms-soon { font-size: .95rem; }
	html body .page-manual .ms-answer-more { font-size: 1rem; }

	/* aanvragen: meldingen, prijsregels en kenmerken */
	html body .field-status,
	html body .field-error,
	html body .plan-price small { font-size: .95rem; }
	html body .plan-points { font-size: 1rem; }

	/* kosten van een website */
	html body .wk-note,
	html body .wk-small { font-size: 1rem; }
	html body .wk-bon-head small { font-size: .95rem; }

	/* vragenlijst (plan-fit) en het stappenteller-regeltje */
	html body .quiz-top { font-size: .95rem; }

	/* portfolio-project: feiten, bijschriften en 'volgende' */
	html body .pj-facts,
	html body .pj-gallery figcaption,
	html body .pj-next small { font-size: .95rem; }

	/* waarom CTXR: labels en tekst in de kaartjes en de prijzen */
	html body .stats li,
	html body .cols h4,
	html body .card-demo .meta,
	html body .calc .row label,
	html body .calc-res div,
	html body .why-tier .why-year,
	html body .why-tier .why-price small { font-size: .95rem; }
	html body .cols ul,
	html body .card-demo p,
	html body .struct-note,
	html body .points li,
	html body .byo-box,
	html body .byo-note,
	html body .three li,
	html body .calc-msg,
	html body .steps span,
	html body .why-tier p { font-size: 1rem; }
	html body p.why-note { font-size: 1rem !important; }

	/* portfolio-kubus: bijschriften op de vlakken (de knoppen laat ik staan) */
	html body #xr.cc .cc-face figcaption small { font-size: .95rem; }
	html body #xr.cc .cc-face figcaption h4 { font-size: 1rem; }
	html body #xr.cc .cc-title-text .cc-hint { font-size: .95rem; }
}

/* aanvragen: het label van de huidige stap onder de stappenbalk */
@media (max-width: 768px) {
	html body .wizard-dots li.is-current .wizard-label { font-size: .95rem; }
}

/* kosten: de balk onderaan met de prijs */
@media (max-width: 860px) {
	html body .wk-sticky { font-size: .95rem; }
}