/**
 * @file wordpressBlockFit
 * @description What it takes for WordPress's own blocks to look like v10's hand-written HTML.
 *   In the editor a link cannot carry an icon and a list item cannot carry a span, so the
 *   arrows, the plus signs and the LinkedIn mark are drawn here instead. Loaded after
 *   v10SiteStyles.css. Nothing here changes how v10 looks.
 *
 * @status In use (build stage 05)
 * @issues The question's plus sign switches to a minus without v10's quarter turn.
 * @todo None
 */

:root {
	--icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5'/%3E%3C/svg%3E");
	--icon-arrow-right-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5'/%3E%3C/svg%3E");
	--icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M10 3v13M5 11l5 5 5-5'/%3E%3C/svg%3E");
	--icon-arrow-down-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M10 3v13M5 11l5 5 5-5'/%3E%3C/svg%3E");
	--icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
}

/* ---- the header stays at the top while the page scrolls, as in v10. WordPress wraps it in a
   box of its own height, which would hold it there; the wrapper is taken out of the layout.
   For someone logged in, it stops under the admin bar. ---- */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }
.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar .masthead { top: 46px; } }
@media (max-width: 600px) { .admin-bar .masthead { top: 0; } }

/* ---- v10 set a few gaps on the element itself; here they are classes ---- */
.wrap--centred { margin-block: auto; }
.space-above-5 { margin-top: var(--space-5); }
.space-above-6 { margin-top: var(--space-6); }
.space-above-7 { margin-top: var(--space-7); }
.space-above-8 { margin-top: var(--space-8); }
.space-above-9 { margin-top: var(--space-9); }

/* ---- the arrow link: a paragraph with class "act" holding one link ---- */
p.act { display: flex; }
p.act > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}
p.act > a::after,
.statement__act > a::after,
.page-head__act > a::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: var(--accent);
	-webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
	mask: var(--icon-arrow-right) center / contain no-repeat;
	transition: transform var(--dur-fast) var(--ease-standard);
}
p.act > a:hover::after { transform: translateX(4px); }
p.act.act--down > a::after {
	-webkit-mask-image: var(--icon-arrow-down);
	mask-image: var(--icon-arrow-down);
}
p.act.act--down > a:hover::after { transform: translateY(3px); }
.card > p.card__act { margin-top: auto; padding-top: var(--space-6); }

/* ---- the button: a paragraph with class "statement__act" or "page-head__act" holding one link ---- */
.statement__act > a,
.page-head__act > a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-regular);
	color: var(--text-heading);
	text-decoration: none;
	cursor: pointer;
	padding: 15px 30px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--btn-edge);
	background: transparent;
	transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.statement__act > a:hover,
.page-head__act > a:hover {
	border-color: var(--text-heading);
	background: var(--btn-fill);
}
.statement__act > a::after,
.page-head__act > a::after {
	width: 20px;
	height: 20px;
	-webkit-mask-image: var(--icon-arrow-right-thin);
	mask-image: var(--icon-arrow-right-thin);
}
.statement__act > a:hover::after,
.page-head__act > a:hover::after { transform: translateX(5px); }
.statement__act.act--down > a::after {
	-webkit-mask-image: var(--icon-arrow-down-thin);
	mask-image: var(--icon-arrow-down-thin);
}
.statement__act.act--down > a:hover::after { transform: translateY(3px); }

/* the closing button: solid orange (v10's btn--close) */
.statement__act.is-closing-button > a {
	background: var(--nl-orange);
	border-color: var(--nl-orange);
	color: #FFFFFF;
	font-weight: var(--fw-semibold);
}
.statement__act.is-closing-button > a::after { background: #FFFFFF; }
.statement__act.is-closing-button > a:hover {
	background: var(--nl-orange-deep);
	border-color: var(--nl-orange-deep);
}
@media (max-width: 560px) {
	.statement__act > a,
	.page-head__act > a { padding: 13px 24px; font-size: var(--fs-body); }
	.statement__act.is-closing-button > a { font-size: 19px; }
}

/* ---- lists in cards: the arrow before each line ---- */
.card__list { padding-left: 0; list-style: none; }
.card__list li::before {
	content: "\2192";
	color: var(--accent);
	flex: 0 0 auto;
}

/* ---- the team photo and the LinkedIn link ---- */
figure.card__photo { display: block; }
p.card__li > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}
p.card__li > a::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--icon-linkedin) center / contain no-repeat;
	mask: var(--icon-linkedin) center / contain no-repeat;
}
p.card__li > a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- product boxes: the status is the bold part of the last line ---- */
.prod__meta strong { font-weight: var(--fw-bold); color: var(--accent-text); }

/* ---- figures: the number and what it counts are two paragraphs ---- */
p.figures__u { margin-top: 10px; }

/* ---- questions: WordPress's own "details" block ---- */
.qa > summary {
	align-items: center;
	font-size: var(--fs-h4);
	line-height: 1.16;
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
	text-wrap: pretty;
	transition: color var(--dur-fast) var(--ease-standard);
}
.qa > summary:hover { color: var(--nl-orange-deep); }
.qa > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	background:
		linear-gradient(var(--nl-orange), var(--nl-orange)) center / 13px 1.5px no-repeat,
		linear-gradient(var(--nl-orange), var(--nl-orange)) center / 1.5px 13px no-repeat;
}
.qa[open] > summary::after {
	background: linear-gradient(var(--nl-orange), var(--nl-orange)) center / 13px 1.5px no-repeat;
}
.qa > p {
	max-width: var(--measure-body);
	margin-top: var(--space-4);
}

/* ---- three steps: the label is a paragraph here (a span in v10), so it takes no top gap ---- */
.seq__step > p.meta { margin-top: 0; }

/* ---- step headings: v10 sets no letter-spacing on them; the theme's h3 setting would tighten them ---- */
.seq__step h3,
.step h3 { letter-spacing: normal; }

/* ---- blog: the post cards on the blog page and under a post ---- */
.cards.wp-block-post-template { list-style: none; margin: 0; padding: 0; max-width: none; }
.cards > li { display: flex; min-width: 0; }
/* WordPress gives each listed post the class "post", which is v10's name for a whole article: no article padding on a card */
.cards > li.post { padding-top: 0; }
.cards > li > .card { flex: 1 1 auto; }
.card__post-image {
	margin: -30px -28px 22px;
	max-width: calc(100% + 56px);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--nl-sunken);
}
.card__post-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__n.wp-block-post-terms a { color: inherit; text-decoration: none; }
.card h3.wp-block-post-title a { color: inherit; text-decoration: none; }
.card h3.wp-block-post-title a:hover { color: var(--accent-text); }
a.act.wp-block-read-more { align-self: flex-start; }
a.act.wp-block-read-more::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: var(--accent);
	-webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
	mask: var(--icon-arrow-right) center / contain no-repeat;
	transition: transform var(--dur-fast) var(--ease-standard);
}
a.act.wp-block-read-more:hover::after { transform: translateX(4px); }
@media (max-width: 700px) {
	.card__post-image { margin: -24px -22px 20px; max-width: calc(100% + 44px); }
}

/* ---- a blog post ---- */
.post__kicker { display: flex; gap: 0.45em; }
.post__kicker .wp-block-post-terms a { color: inherit; text-decoration: none; }
.post__kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
figure.post__img { margin: var(--space-7) 0; max-width: 880px; aspect-ratio: 16 / 8; overflow: hidden; }
figure.post__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post__body > :first-child { margin-top: 0; }

/* tables: WordPress wraps a table in a figure and draws its own borders */
figure.post__table,
figure.legal__table { margin-inline: 0; }
figure.post__table table,
figure.legal__table table { width: 100%; border-collapse: collapse; }
figure.post__table table { font-size: 16px; line-height: 1.5; }
.post__table td,
.post__table th,
.legal__table td,
.legal__table th { border-width: 0 0 1px; }
.post__table thead,
.legal__table thead { border-bottom: 0; }

/* a post with no image yet: the text still starts a clear step below the header */
.post__head + .post__body { margin-top: var(--space-7); }

/* ---- two more of v10's on-the-element settings, as classes ---- */
.measure--lead { max-width: var(--measure-lead); }
.statement__act.act--left { justify-content: flex-start; }

/* ---- a line break set in a large headline holds from tablet width up, as v10's did ---- */
@media (max-width: 759px) {
	.display br { display: none; }
}

/* ---- legal pages: the date line sits one step under the title, as in v10 ---- */
.legal__title + .wp-block-post-content > .legal__date:first-child { margin-top: var(--space-5); }

/* ---- the contact form: the field people never see (it catches programs that fill in everything),
   and the two lines the form can answer with ---- */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { color: var(--accent-text); font-weight: var(--fw-semibold); }
.form__sent { color: var(--text-heading); }