/*
Theme Name: Business Process Portal
Theme URI: https://businessprocessportal.net
Author: Business Process Portal
Author URI: https://businessprocessportal.net
Description: Product website theme for Business Process Portal for WordPress — the BPMN 2.0 process modelling and governance plugin. Home, Features, Pricing, BPP Training, FAQ, Contact, About and Release notes pages, built in the Portal Teal corporate identity.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bpp-theme
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

This is the theme's required stylesheet header block — WordPress reads the
comment above to register the theme; everything below is real CSS.
*/

/* ==========================================================================
   Design tokens — Business Process Portal, "Portal Teal" identity.
   Names and values match the brand book's tokens.json (version 2), so the
   site, the plugin and the brand book never drift apart.
   ========================================================================== */

:root {
	--bpp-ink: #142027;
	--bpp-teal-deep: #1f5f6b;
	--bpp-teal: #2f8a7f;
	--bpp-action-fill: #236f63;
	--bpp-mist: #f2f7f6;
	--bpp-border: #d8e6e4;
	--bpp-surface: #ffffff;
	--bpp-text-soft: #4c5c66;
	--bpp-control-border: #6f8a8c;
	--bpp-on-dark: #d6e4e4;
	--bpp-on-dark-soft: #b9cfd0;
	--bpp-on-dark-accent: #9fd6cd;
	--bpp-on-dark-highlight: #6fc7ba;
	--bpp-rule-dark: #34525b;
	--bpp-outline-dark: #5f8f95;
	--bpp-tip-bg: #fdecc8;
	--bpp-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--bpp-radius-control: 6px;
	--bpp-radius-pill: 8px;
	--bpp-radius-card: 10px;
	--bpp-radius-illustration: 14px;
	--bpp-shadow-card: 0 1px 3px rgba(20, 32, 39, 0.08);
	--bpp-container: 1120px;
}

/* ---- Base ---- */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Honour the visitor's reduced-motion setting: no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--bpp-font);
	font-size: 16px;
	line-height: 26px;
	color: var(--bpp-ink);
	background: var(--bpp-surface);
}

a {
	color: var(--bpp-action-fill);
}

a:hover {
	color: var(--bpp-teal-deep);
}

/* One visible focus ring for every interactive element, light or dark ground. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--bpp-teal);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3,
p,
ul,
ol {
	margin: 0;
}

h1 {
	font-size: 40px;
	line-height: 46px;
}

h2 {
	font-size: 28px;
	line-height: 34px;
}

h3 {
	font-size: 18px;
	line-height: 24px;
}

/* Hides text visually but keeps it for screen readers (form labels, skip link). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The skip link becomes visible when a keyboard user tabs to it. */
.bpp-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 12px 16px;
	background: var(--bpp-surface);
	border-radius: var(--bpp-radius-pill);
}

/* ---- Layout helpers ---- */

.bpp-container {
	max-width: var(--bpp-container);
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.bpp-narrow {
	max-width: 880px;
}

.bpp-section {
	padding-top: 72px;
	padding-bottom: 72px;
}

.bpp-section--mist {
	background: var(--bpp-mist);
}

.bpp-section--ink {
	background: var(--bpp-ink);
	color: #ffffff;
}

.bpp-section--ruled {
	border-top: 1px solid var(--bpp-border);
}

.bpp-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bpp-stack--lg {
	gap: 32px;
}

.bpp-stack--sm {
	gap: 8px;
}

/* A row that wraps: columns sit side by side on wide screens, stack on a phone. */
.bpp-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}

.bpp-row--center {
	align-items: center;
}

/* Reversed wrap puts the text above the picture when the row stacks. */
.bpp-row--reverse {
	flex-wrap: wrap-reverse;
}

.bpp-col {
	flex: 1 1 360px;
	min-width: 0;
}

.bpp-col--wide {
	flex: 2 1 480px;
	min-width: 0;
}

.bpp-col--narrow {
	flex: 1 1 260px;
	min-width: 0;
}

.bpp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.bpp-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 32px;
}

.bpp-soft {
	color: var(--bpp-text-soft);
}

.bpp-section--ink .bpp-soft,
.bpp-card--ink .bpp-soft,
.bpp-page-header--ink .bpp-soft {
	color: var(--bpp-on-dark);
}

.bpp-small {
	font-size: 14px;
	line-height: 22px;
}

.bpp-center {
	text-align: center;
	align-items: center;
}

.bpp-eyebrow {
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bpp-teal-deep);
}

.bpp-section--ink .bpp-eyebrow,
.bpp-page-header--ink .bpp-eyebrow,
.bpp-hero .bpp-eyebrow {
	color: var(--bpp-on-dark-accent);
}

.bpp-lead {
	font-size: 19px;
	line-height: 30px;
	color: var(--bpp-text-soft);
	max-width: 700px;
}

.bpp-list {
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bpp-link-strong {
	font-weight: 700;
}

.bpp-illustration {
	width: 100%;
	border-radius: var(--bpp-radius-illustration);
}

.bpp-illustration--framed {
	border: 1px solid var(--bpp-border);
}

.bpp-row .bpp-illustration {
	flex: 1 1 420px;
	min-width: 0;
	max-width: 600px;
}

/* ---- Buttons ---- */

.bpp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 26px;
	border-radius: var(--bpp-radius-pill);
	border: 1px solid var(--bpp-action-fill);
	background: var(--bpp-action-fill);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.bpp-btn:hover {
	background: var(--bpp-teal-deep);
	border-color: var(--bpp-teal-deep);
	color: #ffffff;
}

.bpp-btn--outline {
	background: transparent;
	color: var(--bpp-action-fill);
}

.bpp-btn--outline:hover {
	background: var(--bpp-mist);
	color: var(--bpp-teal-deep);
}

/* Secondary button on an ink ground. */
.bpp-btn--on-dark {
	background: transparent;
	border-color: var(--bpp-outline-dark);
	color: #ffffff;
}

.bpp-btn--on-dark:hover {
	background: var(--bpp-rule-dark);
	border-color: #ffffff;
}

/* Primary button on the teal-deep call-to-action band. */
.bpp-btn--light {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--bpp-ink);
}

.bpp-btn--light:hover {
	background: var(--bpp-mist);
	border-color: var(--bpp-mist);
	color: var(--bpp-ink);
}

.bpp-btn--light-outline {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

.bpp-btn--light-outline:hover {
	background: var(--bpp-ink);
	border-color: var(--bpp-ink);
}

.bpp-btn--small {
	min-height: 44px;
	padding: 8px 20px;
	font-size: 15px;
}

.bpp-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---- Site header ---- */

.bpp-site-header {
	background: var(--bpp-surface);
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.bpp-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
	text-decoration: none;
	color: var(--bpp-ink);
	font-size: 17px;
	font-weight: 700;
}

.bpp-brand:hover {
	color: var(--bpp-ink);
}

.bpp-brand-mark {
	width: 36px;
	height: 36px;
	border-radius: var(--bpp-radius-card);
	background: linear-gradient(135deg, #142027 0%, #1f5f6b 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* The nav is either wp_nav_menu() output (ul > li > a) or the built-in default list. */
.bpp-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.bpp-nav a {
	display: block;
	padding: 10px 0 8px;
	border-bottom: 2px solid transparent;
	color: var(--bpp-ink);
	text-decoration: none;
}

.bpp-nav a:hover {
	border-bottom-color: var(--bpp-border);
}

.bpp-nav .current-menu-item > a,
.bpp-nav .current_page_item > a,
.bpp-nav .current-page-ancestor > a,
.bpp-nav a[aria-current="page"] {
	border-bottom-color: var(--bpp-action-fill);
	font-weight: 700;
}

/* ---- Page header (top of every inner page) ---- */

.bpp-page-header {
	background: var(--bpp-mist);
	border-bottom: 1px solid var(--bpp-border);
	padding: 64px 0 48px;
}

.bpp-page-header--ink {
	background: var(--bpp-ink);
	border-bottom: 0;
	color: #ffffff;
	padding-bottom: 64px;
}

.bpp-page-header h1 {
	max-width: 820px;
}

/* ---- Home hero ---- */

.bpp-hero {
	background: var(--bpp-ink);
	color: #ffffff;
	padding-top: 72px;
}

.bpp-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.bpp-hero h1 {
	max-width: 860px;
	font-size: 48px;
	line-height: 54px;
}

.bpp-hero h1 span {
	color: var(--bpp-on-dark-highlight);
}

.bpp-hero .bpp-lead {
	max-width: 680px;
	color: var(--bpp-on-dark);
}

.bpp-hero .bpp-btn-row {
	justify-content: center;
}

.bpp-hero__note {
	font-size: 14px;
	color: var(--bpp-on-dark-soft);
}

.bpp-hero__image {
	width: 100%;
	max-width: 1000px;
	margin-top: 16px;
	border-radius: var(--bpp-radius-illustration) var(--bpp-radius-illustration) 0 0;
}

/* ---- Cards ---- */

.bpp-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border-radius: var(--bpp-radius-card);
	border: 1px solid var(--bpp-border);
	background: var(--bpp-surface);
}

.bpp-card--mist {
	background: var(--bpp-mist);
}

.bpp-card--ink {
	background: var(--bpp-ink);
	border-color: var(--bpp-ink);
	color: #ffffff;
}

.bpp-card--lg {
	padding: 32px;
	gap: 16px;
}

.bpp-card--featured {
	border: 2px solid var(--bpp-teal-deep);
}

.bpp-card--shadow {
	box-shadow: var(--bpp-shadow-card);
}

.bpp-card h2 {
	font-size: 20px;
	line-height: 26px;
}

/* A whole card that is a link (tutorial cards). */
a.bpp-card {
	color: var(--bpp-ink);
	text-decoration: none;
	padding: 0;
	overflow: hidden;
}

a.bpp-card:hover {
	border-color: var(--bpp-teal-deep);
}

.bpp-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.bpp-card__image {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	object-position: left top;
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-card__title {
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
}

/* A short point with a rule above it ("Why WordPress", "How the licence works"). */
.bpp-point {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	border-top: 2px solid var(--bpp-teal-deep);
}

.bpp-section--ink .bpp-point {
	border-top-color: var(--bpp-teal);
}

.bpp-price {
	font-size: 48px;
	line-height: 54px;
	font-weight: 700;
}

.bpp-price span {
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: var(--bpp-text-soft);
}

.bpp-tip {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	border-radius: var(--bpp-radius-card);
	background: var(--bpp-tip-bg);
}

/* ---- Chips (jump links on the Features page, path links on Training) ---- */

.bpp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 20px;
}

.bpp-chips a {
	display: block;
	padding: 11px 16px;
	border-radius: var(--bpp-radius-pill);
	border: 1px solid var(--bpp-border);
	background: var(--bpp-surface);
	color: var(--bpp-ink);
	font-weight: 700;
	text-decoration: none;
}

.bpp-chips a:hover {
	border-color: var(--bpp-teal-deep);
}

.bpp-page-header--ink .bpp-chips a {
	background: transparent;
	border-color: var(--bpp-rule-dark);
	color: #ffffff;
}

.bpp-page-header--ink .bpp-chips a:hover {
	border-color: #ffffff;
}

/* ---- Call-to-action band ---- */

.bpp-cta {
	background: var(--bpp-teal-deep);
	color: #ffffff;
	padding: 64px 0;
}

.bpp-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.bpp-cta__text {
	flex: 1 1 420px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bpp-cta__text p {
	color: #e3f1ef;
}

/* ---- Tables ---- */

/* The wrapper scrolls sideways on a phone so the page itself never does. */
.bpp-table-wrap {
	overflow-x: auto;
	border-radius: var(--bpp-radius-card);
	border: 1px solid var(--bpp-border);
	background: var(--bpp-surface);
}

.bpp-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 22px;
	text-align: left;
}

.bpp-table th,
.bpp-table td {
	padding: 14px 20px;
	border-top: 1px solid var(--bpp-border);
	font-weight: 400;
}

.bpp-table thead th {
	border-top: 0;
	background: var(--bpp-ink);
	color: #ffffff;
	font-weight: 700;
}

/* ---- Lists of links (tutorials on the Training page) ---- */

.bpp-linklist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--bpp-border);
}

.bpp-linklist li {
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-linklist__item {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	padding: 18px 0;
	color: var(--bpp-ink);
	text-decoration: none;
}

.bpp-linklist__title {
	flex: 1 1 240px;
	font-weight: 700;
}

a.bpp-linklist__item:hover .bpp-linklist__title {
	color: var(--bpp-action-fill);
	text-decoration: underline;
}

.bpp-linklist__text {
	flex: 2 1 300px;
	color: var(--bpp-text-soft);
}

.bpp-badge {
	align-self: center;
	padding: 2px 10px;
	border-radius: var(--bpp-radius-pill);
	background: #e8e8ea;
	color: #55575c;
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
}

/* ---- Sidebar layouts (FAQ, tutorials, legal pages) ---- */

.bpp-with-sidebar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
	padding-top: 56px;
	padding-bottom: 72px;
}

.bpp-sidebar {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* The huge grow factor lets the content take all spare width until it wraps under the sidebar. */
.bpp-with-sidebar__main {
	flex: 999 1 560px;
	min-width: 0;
}

.bpp-sidenav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bpp-sidenav a {
	padding: 10px 12px;
	border-radius: var(--bpp-radius-control);
	color: var(--bpp-ink);
	text-decoration: none;
}

.bpp-sidenav a:hover {
	background: var(--bpp-mist);
}

.bpp-sidenav a[aria-current="page"] {
	background: var(--bpp-mist);
	font-weight: 700;
}

.bpp-sidenav__label {
	padding-bottom: 8px;
	color: var(--bpp-text-soft);
}

.bpp-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 32px;
	font-size: 14px;
	line-height: 20px;
	color: var(--bpp-text-soft);
}

/* ---- FAQ ---- */

.bpp-faq-group + .bpp-faq-group {
	margin-top: 48px;
}

.bpp-faq-group h2 {
	margin-bottom: 16px;
}

.bpp-faq {
	border-top: 1px solid var(--bpp-border);
	padding: 6px 0;
}

.bpp-faq:last-child {
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-faq summary {
	padding: 12px 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	cursor: pointer;
}

.bpp-faq p {
	margin-bottom: 16px;
	color: var(--bpp-text-soft);
}

/* ---- Release notes ---- */

.bpp-release {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	padding: 28px 0;
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-release__version {
	flex: 0 0 150px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bpp-release__version strong {
	font-size: 20px;
	line-height: 26px;
}

.bpp-release__body {
	flex: 1 1 400px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bpp-release__body h2 {
	font-size: 20px;
	line-height: 26px;
}

/* ---- Forms ---- */

.bpp-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bpp-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.bpp-field {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bpp-field label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}

.bpp-field label span {
	font-weight: 400;
	color: var(--bpp-text-soft);
}

.bpp-field input,
.bpp-field select,
.bpp-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border-radius: var(--bpp-radius-control);
	border: 1px solid var(--bpp-control-border);
	background: var(--bpp-surface);
	color: var(--bpp-ink);
	font: inherit;
}

.bpp-field textarea {
	resize: vertical;
}

/* The honeypot field: real visitors never see or fill it, simple bots do. */
.bpp-field--trap {
	position: absolute;
	left: -9999px;
}

.bpp-notice {
	padding: 16px 20px;
	border-radius: var(--bpp-radius-card);
	background: #dcf3e3;
	color: var(--bpp-ink);
}

.bpp-notice--error {
	background: var(--bpp-tip-bg);
}

.bpp-detail {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bpp-detail span {
	font-size: 14px;
	line-height: 20px;
	color: var(--bpp-on-dark-soft);
}

.bpp-search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.bpp-search input {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 48px;
	padding: 10px 16px;
	border-radius: var(--bpp-radius-control);
	border: 1px solid var(--bpp-control-border);
	font: inherit;
}

/* ---- Prose: content typed into the WordPress editor ---- */

.bpp-prose {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 720px;
}

.bpp-prose > * {
	margin: 0;
}

.bpp-prose h2 {
	margin-top: 12px;
}

.bpp-prose ul,
.bpp-prose ol {
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bpp-prose img {
	border-radius: var(--bpp-radius-illustration);
}

.bpp-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
	padding-top: 32px;
	border-top: 1px solid var(--bpp-border);
}

.bpp-pager a {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 24px;
	border-radius: var(--bpp-radius-card);
	border: 1px solid var(--bpp-border);
	color: var(--bpp-ink);
	text-decoration: none;
}

.bpp-pager a strong {
	color: var(--bpp-action-fill);
}

.bpp-pager__next {
	text-align: right;
}

/* ---- 404 ---- */

.bpp-notfound {
	padding: 96px 0;
	background: var(--bpp-mist);
}

.bpp-notfound .bpp-btn-row {
	justify-content: center;
}

.bpp-notfound__diagram {
	display: flex;
	align-items: center;
}

.bpp-notfound__event {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--bpp-teal-deep);
	background: var(--bpp-surface);
}

.bpp-notfound__event--end {
	border-width: 5px;
}

.bpp-notfound__flow {
	width: 40px;
	height: 2px;
	background: var(--bpp-teal-deep);
}

.bpp-notfound__task {
	padding: 12px 18px;
	border-radius: var(--bpp-radius-card);
	border: 2px solid var(--bpp-teal-deep);
	background: var(--bpp-surface);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}

/* ---- Site footer ---- */

.bpp-site-footer {
	background: var(--bpp-ink);
	color: var(--bpp-on-dark);
	font-size: 14px;
	line-height: 22px;
	padding: 56px 0 32px;
}

.bpp-site-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 32px;
}

.bpp-site-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
}

.bpp-site-footer__brand .bpp-brand-mark {
	width: 32px;
	height: 32px;
	border-radius: var(--bpp-radius-pill);
}

.bpp-site-footer h2 {
	margin-bottom: 8px;
	color: #ffffff;
	font-size: 14px;
	line-height: 22px;
}

.bpp-site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpp-site-footer li a {
	display: block;
	padding: 4px 0;
	color: var(--bpp-on-dark);
	text-decoration: none;
}

.bpp-site-footer li a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.bpp-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--bpp-rule-dark);
	font-size: 13px;
	color: var(--bpp-on-dark-soft);
}

.bpp-site-footer__legal span:first-child {
	margin-right: auto;
}

/* ---- Small screens ---- */

@media (max-width: 640px) {
	h1,
	.bpp-hero h1 {
		font-size: 32px;
		line-height: 38px;
	}

	h2 {
		font-size: 24px;
		line-height: 30px;
	}

	.bpp-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.bpp-release__version {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Block editor markup.
   Page content is made of WordPress's own blocks (group, heading, paragraph,
   list, image, buttons, details, table) carrying the class names above.
   These rules cover the wrappers and defaults those blocks bring with them.
   ========================================================================== */

figure {
	margin: 0;
}

.bpp-stack--xl {
	gap: 72px;
}

/* Training paths sit close together, so they share one visual section. */
.bpp-section--tight {
	padding-top: 56px;
	padding-bottom: 8px;
}

.bpp-section--tight + .bpp-section--mist {
	margin-top: 64px;
}

/* A paragraph used as a card or tip must stay a text block: as a flex
   container its bold and plain runs would split into separate columns. */
p.bpp-card,
p.bpp-tip {
	display: block;
}

/* ---- Images ---- */

.wp-block-image.bpp-illustration,
.wp-block-image.bpp-hero__image {
	margin: 0;
}

.bpp-illustration img {
	width: 100%;
	border-radius: var(--bpp-radius-illustration);
}

.bpp-illustration--framed img {
	border: 1px solid var(--bpp-border);
}

.bpp-hero__image img {
	width: 100%;
	border-radius: var(--bpp-radius-illustration) var(--bpp-radius-illustration) 0 0;
}

/* ---- Buttons (the Buttons block) ---- */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bpp-center .wp-block-buttons,
.bpp-hero .wp-block-buttons {
	justify-content: center;
}

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 26px;
	border-radius: var(--bpp-radius-pill);
	border: 1px solid var(--bpp-action-fill);
	background: var(--bpp-action-fill);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.wp-block-button .wp-block-button__link:hover {
	background: var(--bpp-teal-deep);
	border-color: var(--bpp-teal-deep);
	color: #ffffff;
}

/* "Outline" is the style WordPress offers in the editor's Styles panel. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 10px 26px;
	border: 1px solid var(--bpp-action-fill);
	background: transparent;
	color: var(--bpp-action-fill);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--bpp-mist);
	color: var(--bpp-teal-deep);
}

/* Secondary button on an ink ground: add the class "bpp-on-dark" to the button. */
.wp-block-button.bpp-on-dark > .wp-block-button__link {
	background: transparent;
	border-color: var(--bpp-outline-dark);
	color: #ffffff;
}

.wp-block-button.bpp-on-dark > .wp-block-button__link:hover {
	background: var(--bpp-rule-dark);
	border-color: #ffffff;
}

/* Buttons on the teal call-to-action band: "bpp-light" and "bpp-light-outline". */
.wp-block-button.bpp-light > .wp-block-button__link {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--bpp-ink);
}

.wp-block-button.bpp-light > .wp-block-button__link:hover {
	background: var(--bpp-mist);
	border-color: var(--bpp-mist);
}

.wp-block-button.bpp-light-outline > .wp-block-button__link {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

.wp-block-button.bpp-light-outline > .wp-block-button__link:hover {
	background: var(--bpp-ink);
	border-color: var(--bpp-ink);
}

/* ---- Text on dark grounds ---- */

.bpp-hero h1 em {
	font-style: normal;
	color: var(--bpp-on-dark-highlight);
}

.bpp-page-header--ink .bpp-lead {
	color: var(--bpp-on-dark);
}

.bpp-card--ink a {
	color: #ffffff;
}

.bpp-card h3 a {
	color: inherit;
}

.bpp-card h3 a:hover {
	color: var(--bpp-action-fill);
}

/* ---- Lists ---- */

.bpp-chips li,
.bpp-linklist li {
	margin: 0;
}

.bpp-linklist li {
	padding: 18px 0;
	color: var(--bpp-text-soft);
}

.bpp-linklist li strong {
	color: var(--bpp-ink);
}

.bpp-linklist li strong a {
	color: var(--bpp-action-fill);
}

/* ---- FAQ (the Details block) ---- */

.bpp-faq-group .wp-block-details {
	border-top: 1px solid var(--bpp-border);
	padding: 6px 0;
}

.bpp-faq-group .wp-block-details:last-child {
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-faq-group .wp-block-details summary {
	padding: 12px 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	cursor: pointer;
}

.bpp-faq-group .wp-block-details p {
	margin-bottom: 16px;
	color: var(--bpp-text-soft);
}

/* ---- Tables (the Table block) ---- */

/* The figure scrolls sideways on a phone so the page itself never does. */
.wp-block-table {
	overflow-x: auto;
	border-radius: var(--bpp-radius-card);
	border: 1px solid var(--bpp-border);
	background: var(--bpp-surface);
}

.wp-block-table table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 22px;
	text-align: left;
}

.wp-block-table th,
.wp-block-table td {
	padding: 14px 20px;
	border: 0;
	border-top: 1px solid var(--bpp-border);
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table thead th {
	border-top: 0;
	background: var(--bpp-ink);
	color: #ffffff;
	font-weight: 700;
}

/* ---- Footer menus (wp_nav_menu output) ---- */

.bpp-site-footer .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* On the public site WordPress wraps a Group block's contents in one extra
   <div> for themes like this one (the editor does not). "display: contents"
   makes that wrapper invisible to layout, so the rows, grids and stacks
   above apply to the real children in both places. */
.wp-block-group__inner-container {
	display: contents;
}