/*
 * Content types (Mode B). Tokens only. One section per type; the type comes from the template the editor picks
 * (R30), so a new page of that type gets this design without code.
 */

/* ---------- Breadcrumb and "On this page" (bpb/breadcrumb, bpb/page-toc) ---------- */

.bpb-breadcrumb p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body-text);
}

/* Navy, not green: green on cream is 4.48:1, below AA for small text. Underlined, so it still reads as a link. */
.bpb-breadcrumb a {
	color: var(--wp--preset--color--heading);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bpb-crumb-sep {
	margin: 0 var(--wp--preset--spacing--10);
}

.bpb-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Legal pages (template "Legal page", D32) ---------- */

.bpb-legal > * {
	margin-block: 0;
}

.bpb-legal-head {
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface-cream);
}

.bpb-legal-head > *,
.bpb-legal-body > * {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
}

.bpb-legal-head .bpb-legal-title {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0;
}

.bpb-legal-body {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) var(--wp--preset--spacing--100);
}

.bpb-legal-toc {
	margin-bottom: var(--wp--preset--spacing--80);
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface-green);
}

.bpb-legal-toc::before {
	content: "On this page";
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
}

.bpb-legal-toc .bpb-toc-list {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	counter-reset: bpb-toc;
}

.bpb-legal-toc .bpb-toc-list li {
	counter-increment: bpb-toc;
}

.bpb-legal-toc .bpb-toc-list a::before {
	content: counter(bpb-toc) ". ";
}

.bpb-legal-toc a {
	color: var(--wp--preset--color--action);
}

/* Section numbers are computed from the order of the headings (R33), never typed. */
.bpb-legal-text {
	counter-reset: bpb-sec;
	line-height: 1.7;
}

.bpb-legal-text > * {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.bpb-legal-text h2 {
	margin-top: var(--wp--preset--spacing--80);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
	counter-increment: bpb-sec;
	scroll-margin-top: 96px;
}

.bpb-legal-text h2::before {
	content: counter(bpb-sec) ". ";
	color: var(--wp--preset--color--action);
}

.bpb-legal-text .bpb-legal-date {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--heading);
}

.bpb-legal-text a {
	color: var(--wp--preset--color--action);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bpb-legal-text ul {
	padding-left: var(--wp--preset--spacing--60);
}

/* ---------- Contact page (template "Contact page", D10, D36) ---------- */

.bpb-contact-text {
	line-height: 1.7;
}

.bpb-contact-text > * {
	margin-block: 0 var(--wp--preset--spacing--60);
}

.bpb-contact-text a {
	color: var(--wp--preset--color--action);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bpb-contact-text .bpb-contact-lead {
	font-size: var(--wp--preset--font-size--large);
}

.bpb-contact-text .bpb-contact-note {
	font-size: var(--wp--preset--font-size--small);
}

.bpb-contact-text .bpb-contact-box {
	margin-top: var(--wp--preset--spacing--80);
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface-green);
}

.bpb-contact-box > * {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.bpb-contact-box > :last-child {
	margin-bottom: 0;
}

.bpb-contact-box h2 {
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
}

/* Beige with a warm edge. Links navy: green on beige is 3.98:1, below AA. */
.bpb-contact-text .bpb-contact-box-warn {
	border-left: 4px solid var(--wp--preset--color--accent-warm);
	background-color: var(--wp--preset--color--surface-beige);
}

.bpb-contact-box-warn a {
	color: var(--wp--preset--color--heading);
}

/*
 * Fluent Forms. Its default skin reads these variables; the form's submit button is set to "no style" in the
 * form (contact-form.json), so Fluent prints no inline colour and the button follows the theme here.
 * The palette has no red: errors are navy, bold and worded ("This field is required").
 * Input borders use the body text colour so the field edge has at least 3:1 contrast (WCAG 1.4.11).
 */
.bpb-contact .fluentform {
	--fluentform-primary: var(--wp--preset--color--action);
	--fluentform-secondary: var(--wp--preset--color--body-text);
	--fluentform-danger: var(--wp--preset--color--heading);
	--fluentform-border-color: var(--wp--preset--color--body-text);
	--fluentform-border-radius: var(--wp--custom--radius--button);
	margin-bottom: var(--wp--preset--spacing--60);
}

/*
 * Error lines must not move the layout: Fluent removes a field's error when the field loses focus, which is the
 * mouse-down on "Send message"; if the button then moves, the click is lost (measured: 31.5 px jump, first send
 * after an error did nothing). So each field keeps 32 px below it, and the error sits in that space.
 */
.bpb-contact .fluentform .ff-el-group {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--70);
}

/* Fluent's own 5px label gap and 15px name-row gap, moved onto the 4px grid. */
.bpb-contact .fluentform .ff-el-input--label {
	margin-bottom: var(--wp--preset--spacing--20);
}

.bpb-contact .fluentform .ff-t-container {
	gap: var(--wp--preset--spacing--40);
}

.bpb-contact .fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	color: var(--wp--preset--color--heading);
}

.bpb-contact .fluentform .ff-el-form-control {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--body-text);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	color: var(--wp--preset--color--body-text);
}

.bpb-contact .fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--action);
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 1px;
	color: var(--wp--preset--color--body-text);
}

/*
 * After a send with errors, Fluent scrolls the first error group to 52 px from the window top (fixed in its JS),
 * which put the field's label under the 73 px sticky header (D28). The group's top edge is moved 32 px up
 * (padding and an equal negative margin cancel out, so nothing visible moves), and the label lands below the header.
 */
.bpb-contact .fluentform .ff-el-is-error {
	margin-top: calc(-1 * var(--wp--preset--spacing--70));
	padding-top: var(--wp--preset--spacing--70);
}

/* A second pixel of border drawn inside the field, so its size does not change. */
.bpb-contact .fluentform .ff-el-is-error .ff-el-form-control {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--heading);
}

.bpb-contact .fluentform .text-danger {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.bpb-contact .fluentform .ff-btn-submit {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--action);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.bpb-contact .fluentform .ff-btn-submit:hover,
.bpb-contact .fluentform .ff-btn-submit:focus-visible {
	background-color: var(--wp--preset--color--heading);
}

.bpb-contact .fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--heading);
	outline-offset: 2px;
}

.bpb-contact .ff-message-success {
	margin-top: 0;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface-green);
	box-shadow: none;
	color: var(--wp--preset--color--heading);
}

/* ---------- 404 and search results (templates 404, search; D39) ---------- */

.bpb-utility-body > * {
	margin-block: 0 var(--wp--preset--spacing--60);
}

.bpb-utility-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
}

/* Inside the query block ("no results"), out of reach of the rule above. */
.bpb-search-results .bpb-utility-lead {
	margin-block: 0;
}

.bpb-utility-search .wp-block-search__label {
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	color: var(--wp--preset--color--heading);
}

.bpb-utility-search .wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.bpb-utility-search .wp-block-search__input {
	min-width: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--body-text);
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	color: var(--wp--preset--color--body-text);
}

.bpb-utility-search .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--action);
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 1px;
}

.bpb-utility-search .wp-block-search__button {
	margin-left: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	border: 0;
	line-height: 1.5;
}

.bpb-utility-search .wp-block-search__button:hover,
.bpb-utility-search .wp-block-search__button:focus-visible {
	background-color: var(--wp--preset--color--heading);
}

.bpb-utility-search .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--heading);
	outline-offset: 2px;
}

.bpb-utility-body .bpb-utility-subhead {
	margin-top: var(--wp--preset--spacing--80);
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
}

.bpb-sections-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpb-sections-list a {
	display: block;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--surface-green);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--heading);
}

.bpb-sections-list a:hover,
.bpb-sections-list a:focus-visible {
	border-color: var(--wp--preset--color--action);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bpb-search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpb-search-list > li {
	padding-block: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.bpb-search-list > li:first-child {
	padding-top: var(--wp--preset--spacing--20);
}

.bpb-search-list .bpb-search-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
}

.bpb-search-list .bpb-search-title a {
	text-decoration: none;
	color: var(--wp--preset--color--heading);
}

.bpb-search-list .bpb-search-title a:hover,
.bpb-search-list .bpb-search-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--wp--preset--color--action);
}

.bpb-search-excerpt p {
	margin: 0;
	line-height: 1.7;
}

.bpb-search-pages {
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
	font-weight: 600;
}

.bpb-search-pages a {
	color: var(--wp--preset--color--action);
}

/* ---------- FAQ page (template "FAQ page", D41-D44) ---------- */

.bpb-faq-text {
	line-height: 1.7;
}

.bpb-faq-text > * {
	margin-block: 0 var(--wp--preset--spacing--60);
}

.bpb-faq-text a {
	color: var(--wp--preset--color--action);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bpb-faq-text .bpb-faq-lead {
	font-size: var(--wp--preset--font-size--large);
}

.bpb-faq-list {
	border-top: 1px solid var(--wp--preset--color--border);
}

.bpb-faq-list > .bpb-faq-item {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.bpb-faq-text .bpb-faq-item > summary {
	position: relative;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--heading);
	list-style: none;
	cursor: pointer;
}

.bpb-faq-text .bpb-faq-item > summary::-webkit-details-marker {
	display: none;
}

/* Chevron drawn with two borders (no icon file); points down when closed, up when open. */
.bpb-faq-text .bpb-faq-item > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--20);
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--wp--preset--color--action);
	border-bottom: 2px solid var(--wp--preset--color--action);
	transform: translateY(-75%) rotate(45deg);
}

.bpb-faq-text .bpb-faq-item[open] > summary::after {
	transform: translateY(-25%) rotate(-135deg);
}

@media (prefers-reduced-motion: no-preference) {

	.bpb-faq-text .bpb-faq-item > summary::after {
		transition: transform 0.2s ease;
	}
}

.bpb-faq-text .bpb-faq-item > summary:hover {
	color: var(--wp--preset--color--action);
}

.bpb-faq-text .bpb-faq-item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

.bpb-faq-text .bpb-faq-item > :not(summary) {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.bpb-faq-text .bpb-faq-item > :last-child {
	margin-bottom: var(--wp--preset--spacing--50);
}

.bpb-faq-text .bpb-faq-more a {
	font-weight: 600;
}

.bpb-faq-text .bpb-faq-ask {
	margin-top: var(--wp--preset--spacing--80);
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--surface-green);
}

.bpb-faq-ask > * {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.bpb-faq-ask > :last-child {
	margin-bottom: 0;
}

.bpb-faq-ask h2,
.bpb-faq-text .bpb-sources-title {
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
}

/* Core's button padding (0.667em + 2px) is off the 4px grid. */
.bpb-faq-ask .wp-block-button__link {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	line-height: 1.5;
	text-decoration: none;
	color: var(--wp--preset--color--base);
}

.bpb-faq-ask .wp-block-button__link:hover,
.bpb-faq-ask .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--heading);
}

.bpb-faq-ask .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--heading);
	outline-offset: 2px;
}

.bpb-faq-text .bpb-sources-title {
	margin-top: var(--wp--preset--spacing--80);
	margin-bottom: var(--wp--preset--spacing--30);
}

.bpb-faq-text .bpb-sources-note,
.bpb-faq-text .bpb-sources {
	font-size: var(--wp--preset--font-size--small);
}

.bpb-faq-text .bpb-sources-note {
	margin-bottom: var(--wp--preset--spacing--30);
}

.bpb-faq-text .bpb-sources {
	padding-left: var(--wp--preset--spacing--60);
}

.bpb-faq-text .bpb-sources li + li {
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------- About page (template "About page", D49-D51) ---------- */

.bpb-about-text {
	line-height: 1.7;
}

.bpb-about-text > * {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.bpb-about-text .bpb-about-lead {
	margin-bottom: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--large);
}

.bpb-about-text h2 {
	margin-top: var(--wp--preset--spacing--80);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
	scroll-margin-top: 96px; /* Below the sticky header when reached by #editorial-standards. */
}

.bpb-about-text a {
	color: var(--wp--preset--color--action);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bpb-about-text .bpb-about-rules {
	padding-left: var(--wp--preset--spacing--60);
}

.bpb-about-rules li + li {
	margin-top: var(--wp--preset--spacing--30);
}

.bpb-about-rules strong {
	color: var(--wp--preset--color--heading);
}

/* ---------- Sitemap page (template "Sitemap page", D46; list from bpb/site-map) ---------- */

.bpb-sitemap-text {
	line-height: 1.7;
}

.bpb-sitemap-text > * {
	margin-block: 0 var(--wp--preset--spacing--60);
}

.bpb-sitemap-text .bpb-sitemap-lead {
	font-size: var(--wp--preset--font-size--large);
}

.bpb-sitemap {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
}

.bpb-sitemap-group {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bpb-sitemap .bpb-sitemap-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
}

.bpb-sitemap-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpb-sitemap-list li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.bpb-sitemap-list a {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--heading);
}

.bpb-sitemap-list a:hover,
.bpb-sitemap-list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--wp--preset--color--action);
}

/* D112: a group whose pages list their sections (Guides) spans the row; its pages sit in two columns, each page
   kept whole, its sections as a lighter list below it. */
.bpb-sitemap-group--sections {
	grid-column: 1 / -1;
}

.bpb-sitemap-group--sections > .bpb-sitemap-list {
	columns: 2;
	column-gap: var(--wp--preset--spacing--80);
}

.bpb-sitemap-group--sections > .bpb-sitemap-list > li {
	break-inside: avoid;
	padding-bottom: var(--wp--preset--spacing--30);
}

.bpb-sitemap-group--sections > .bpb-sitemap-list > li + li {
	margin-top: 0;
}

.bpb-sitemap-sub {
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0 0 0 var(--wp--preset--spacing--30);
	list-style: none;
	border-left: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}

.bpb-sitemap-sub li + li {
	margin-top: var(--wp--preset--spacing--10);
}

.bpb-sitemap-list .bpb-sitemap-sub a {
	font-weight: 400;
	color: var(--wp--preset--color--body-text);
}

.bpb-sitemap .bpb-sitemap-xml {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.bpb-sitemap-xml a {
	color: var(--wp--preset--color--action);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 1024px) {

	.bpb-legal-head .bpb-legal-title {
		font-size: var(--wp--custom--font-size-step--page-title-tablet);
	}
}

@media (max-width: 767px) {

	.bpb-legal-head {
		padding-top: var(--wp--preset--spacing--80);
		padding-bottom: var(--wp--preset--spacing--70);
	}

	.bpb-legal-head .bpb-legal-title {
		font-size: var(--wp--custom--font-size-step--page-title-mobile);
	}

	.bpb-legal-text h2,
	.bpb-contact-box h2,
	.bpb-utility-body .bpb-utility-subhead,
	.bpb-search-list .bpb-search-title,
	.bpb-faq-ask h2,
	.bpb-faq-text .bpb-sources-title,
	.bpb-sitemap .bpb-sitemap-title,
	.bpb-about-text h2 {
		font-size: var(--wp--custom--font-size-step--card-title-mobile);
	}

	.bpb-sitemap {
		grid-template-columns: minmax(0, 1fr);
	}

	.bpb-sitemap-group--sections > .bpb-sitemap-list {
		columns: 1;
	}

	.bpb-sections-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bpb-contact .fluentform .ff-btn-submit {
		width: 100%;
	}
}