/**
 * JobRelay theme styles.
 * Loaded on the front end and in the editor.
 * Only for things theme.json can't do.
 */

/*
 * Header account link, shown as a person icon. The link keeps its
 * "My account" text for screen readers and the editor, but it's pushed
 * out of view (text-indent). The icon is painted on top with a CSS mask
 * on ::before, so it takes the link's colour and the link itself still
 * shows a focus outline. The Icon block can't be a link, which is why
 * this is done in CSS.
 */
.header-account a {
	border-radius: 50%;
	color: var(--wp--preset--color--navy);
	display: block;
	height: 28px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	text-indent: 100%;
	transition: color 0.2s ease;
	white-space: nowrap;
	width: 28px;
}

.header-account a::before {
	background-color: currentColor;
	content: "";
	inset: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3C/svg%3E") no-repeat center / contain;
	position: absolute;
}

.header-account a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--mint-dark);
}

/*
 * Header on smaller screens.
 *
 * Core's Navigation block only switches to the burger menu below 600px,
 * but five links plus the account link and button don't fit until about
 * 1024px. Between 600px and 1023px this shows the burger button and
 * hides the inline links, the same as core does on phones.
 */
@media (min-width: 600px) and (max-width: 1023px) {
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * Below 1024px the header is just the logo and the burger. My account
 * and Book a call move into the burger menu, which has its own copies of
 * both links (class site-nav__mobile-only), hidden on wider screens.
 */
@media (max-width: 1023px) {
	.site-header__row {
		flex-wrap: nowrap !important;
	}

	.site-header__actions {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.site-nav .site-nav__mobile-only {
		display: none !important;
	}
}

/*
 * Header links on wide screens: a mint line swipes in underneath from
 * the left on hover, the same feel as the buttons and content links.
 * Only from 1024px, where the links sit in the header rather than in
 * the burger menu.
 */
@media (min-width: 1024px) {
	.site-nav .wp-block-navigation-item__content {
		background-image: linear-gradient(var(--wp--preset--color--mint), var(--wp--preset--color--mint));
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0% 2px;
		padding-bottom: 4px;
		transition: background-size 0.4s cubic-bezier(0.65, 0, 0.35, 1);
	}

	.site-nav .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background-size: 100% 2px;
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	.site-nav .wp-block-navigation-item__content {
		transition: none;
	}
}

/*
 * The open burger menu. Core's overlay rules are very specific (four
 * classes deep), so these selectors start from .is-menu-open to beat
 * them. Links are larger and easier to tap, with a thin line between
 * each, and the menu fills the width of the screen.
 */
.site-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
}

.site-nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0;
	width: 100%;
}

.site-nav .is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--grey);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.site-nav .is-menu-open .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content {
	padding: 14px 0;
}

/*
 * Book a call: a full-width mint button at the bottom of the menu, with
 * the same colours, radius and hover as the theme's buttons
 * (theme.json elements.button).
 */
.site-nav .is-menu-open .wp-block-navigation-item.site-nav__button {
	border-bottom: 0;
	margin-top: var(--wp--preset--spacing--50);
}

.site-nav .is-menu-open .wp-block-navigation-item.site-nav__button .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--mint);
	border-radius: var(--wp--custom--radius--medium);
	/* Same swipe on hover as the theme's buttons (see Buttons below). */
	background-image: linear-gradient(#00c496, #00c496);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	padding: 14px 26px;
	text-align: center;
	transition: background-size 0.4s cubic-bezier(0.65, 0, 0.35, 1), transform 0.2s ease;
}

.site-nav .is-menu-open .wp-block-navigation-item.site-nav__button .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	background-size: 100% 100%;
	transform: translate(1px, -1px);
}

/* Eyebrow on dark backgrounds: switch from dark mint to white. */
.has-navy-background-color .is-style-eyebrow,
.has-navy-mint-gradient-background .is-style-eyebrow {
	color: var(--wp--preset--color--white);
}

/* ---------- Footer ---------- */

/*
 * Sit the footer flush against the content above it. Otherwise the root
 * block gap (24px) leaves a white strip under full-width sections.
 */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.site-footer {
	color: rgba(255, 255, 255, 0.8);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.site-footer .footer-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.7);
	padding-top: 24px;
}

/* ---------- Group: Dots style ---------- */

/*
 * Faint white dot grid over the block's background.
 * Drawn on ::before so it layers on top of any background colour or
 * gradient, but underneath the block's content.
 */
.is-style-dots {
	isolation: isolate;
	position: relative;
}

.is-style-dots::before {
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
	background-size: 22px 22px;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* ---------- Left-aligned content column ---------- */

/*
 * Normal blocks keep the content width (760px) but start at the left edge
 * of the wide area (1200px), lining up with the header and page title.
 * Wide and full width blocks are untouched, so full width still reaches
 * the screen edges.
 */
.is-content-left.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
}

/* ---------- Page title banner ---------- */

/*
 * Faint relay arrows from the logo on the right of the banner, sized to
 * the banner's height and lined up with the right edge of the wide area.
 * Decorative only, so it's a CSS background rather than an image block.
 */
.page-banner {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.page-banner::after {
	aspect-ratio: 460 / 222;
	background: url("../images/relay-mark.svg") no-repeat center / contain;
	content: "";
	height: 110%;
	max-width: 45%;
	opacity: 0.12;
	pointer-events: none;
	position: absolute;
	right: max(var(--wp--style--root--padding-right), calc((100% - var(--wp--style--global--wide-size)) / 2));
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}

@media (max-width: 781px) {
	.page-banner::after {
		display: none;
	}
}

/*
 * Banner entrance. When the page loads, the banner's contents (badge,
 * title, intro, date, search) fade in and rise 12px, one after another,
 * and the relay arrows fade in behind them. Front end only: the editor
 * has no .wp-site-blocks wrapper, so it isn't replayed while editing.
 * Turned off for visitors who prefer less motion.
 */
@media (prefers-reduced-motion: no-preference) {
	.wp-site-blocks .page-banner > * {
		animation: jobrelay-banner-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.wp-site-blocks .page-banner > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.wp-site-blocks .page-banner > :nth-child(3) {
		animation-delay: 0.16s;
	}

	.wp-site-blocks .page-banner > :nth-child(n + 4) {
		animation-delay: 0.24s;
	}

	.wp-site-blocks .page-banner::after {
		animation: jobrelay-fade-in 1.2s ease 0.2s both;
	}
}

@keyframes jobrelay-banner-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes jobrelay-fade-in {
	from {
		opacity: 0;
	}
}

/*
 * Banner titles stay left-aligned with the wide area, but wrap at the
 * content width (760px) so long titles don't run across the whole banner.
 * The padding takes up the gap between the two widths on the right; on
 * narrow screens it shrinks to nothing. text-wrap: balance evens out the
 * lines so a title doesn't end on one short word.
 */
.page-banner :is(h1, .wp-block-post-title, .wp-block-query-title) {
	box-sizing: border-box;
	padding-right: max(0px, calc(min(100%, var(--wp--style--global--wide-size)) - var(--wp--style--global--content-size)));
	text-wrap: balance;
}

/*
 * When a page starts or ends with a full-width block that has a background,
 * drop the main area's padding so it sits flush against the banner/footer.
 * Only when the content is the first/last thing in main: on blog posts the
 * featured image and tags sit around it, so the padding stays.
 * !important is needed to beat the padding set inline on the main group.
 */
main:has(> .wp-block-post-content:first-child > .alignfull.has-background:first-child) {
	padding-top: 0 !important;
}

main:has(> .wp-block-post-content:last-child > .alignfull.has-background:last-child) {
	padding-bottom: 0 !important;
}

/*
 * Full-width sections with a background are built to sit flush against
 * each other (their patterns set margin-top: 0). When one follows
 * ordinary content, like a paragraph, give it room so the background
 * doesn't butt up against the text. Same for ordinary content after a
 * section. Not between two full-width sections (with or without a
 * background): those already have their own padding.
 * !important beats the inline margin-top: 0.
 */
.wp-block-post-content > :not(.alignfull) + .alignfull.has-background,
.wp-block-post-content > .alignfull.has-background + :not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--70) !important;
}

/*
 * Page "sheet" (templates/page.html). The top of the page content sits
 * on a white panel with rounded top corners that overlaps the bottom of
 * the navy banner, so the content looks pulled up over it. The banner
 * gets extra bottom padding to make room, main is pulled up by the same
 * amount, and the panel is a ::before behind main's content. Below the
 * banner the panel blends into the white page, so full-width sections
 * further down are unaffected. The panel is a little wider than the wide
 * area so text inside it doesn't touch its edges.
 */
:root {
	--jobrelay-sheet-overlap: clamp(48px, 6vw, 80px);
}

.page-banner--sheet {
	padding-bottom: calc(var(--wp--preset--spacing--70) + var(--jobrelay-sheet-overlap)) !important;
}

.page-sheet {
	margin-top: calc(-1 * var(--jobrelay-sheet-overlap)) !important;
	position: relative;
	z-index: 1;
}

.page-sheet::before {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--x-large) var(--wp--custom--radius--x-large) 0 0;
	content: "";
	height: calc(var(--jobrelay-sheet-overlap) + 1px);
	left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2 - var(--wp--preset--spacing--60)));
	position: absolute;
	right: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2 - var(--wp--preset--spacing--60)));
	top: 0;
	z-index: -1;
}

/*
 * When the page starts with a full-width section without a background
 * (e.g. the Team pattern), its own top padding would stack on top of
 * main's, leaving a big gap at the top of the sheet. Drop the section's
 * top padding so the content starts the same distance down as normal
 * text. !important beats the padding set inline on the section.
 */
.page-sheet > .wp-block-post-content > .alignfull:not(.has-background):first-child {
	padding-top: 0 !important;
}

/*
 * Pages that start with a full-width coloured section don't use the
 * sheet: the section sits flush under the banner as before.
 */
.page-banner--sheet:has(+ .page-sheet > .wp-block-post-content:first-child > .alignfull.has-background:first-child) {
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

.page-sheet:has(> .wp-block-post-content:first-child > .alignfull.has-background:first-child) {
	margin-top: 0 !important;
}

.page-sheet:has(> .wp-block-post-content:first-child > .alignfull.has-background:first-child)::before {
	display: none;
}

/*
 * The call to action that templates add after main (e.g. "Page with call
 * to action"). When the page ends with a full-width section without a
 * background, both sections' padding would stack into a big gap, so the
 * call to action drops its top padding.
 */
main:has(> .wp-block-post-content > .alignfull:not(.has-background):last-child) + .alignfull {
	padding-top: 0 !important;
}

/* ---------- Links in page content ---------- */

/*
 * Navy text with a thick, soft mint underline. On hover a full mint
 * underline swipes across it from the left. Buttons are excluded so
 * they keep their own styling.
 */
.wp-block-post-content a:where(:not(.wp-element-button)) {
	/*
	 * The underline is drawn with two background lines instead of
	 * text-decoration, so it can animate: a faint mint line underneath,
	 * and a solid mint line on top that swipes in from the left on hover
	 * (the same feel as the buttons). On links that wrap onto two lines
	 * the swipe runs along the first line, then the second.
	 */
	background-image:
		linear-gradient(var(--wp--preset--color--mint), var(--wp--preset--color--mint)),
		linear-gradient(rgba(0, 214, 165, 0.35), rgba(0, 214, 165, 0.35));
	background-position: 0 100%, 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 3px, 100% 3px;
	padding-bottom: 2px;
	text-decoration: none;
	transition: background-size 0.4s cubic-bezier(0.65, 0, 0.35, 1), color 0.15s ease;
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover,
.wp-block-post-content a:where(:not(.wp-element-button)):focus {
	background-size: 100% 3px, 100% 3px;
	color: var(--wp--preset--color--navy);
}

/*
 * No underline on linked images, or on links that have their own
 * styling: the contents box, FAQ topics, the "+ Any XML feed" tile, the
 * docs hub and post titles in query loops.
 */
.wp-block-post-content a:where(:not(.wp-element-button)):has(img),
.wp-block-post-content :is(.simpletoc-list, .faq-nav__list, .integration-more, .docs-hub, .wp-block-post-title, .wp-block-navigation) a {
	background-image: none;
	padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-content a:where(:not(.wp-element-button)) {
		transition: color 0.15s ease;
	}
}

/* ---------- Lists in page content ---------- */

/* Space between list items (and nested lists), but not after the last one. */
.wp-block-post-content :where(ul, ol) > li + li,
.wp-block-post-content li > :where(ul, ol) {
	margin-top: var(--wp--preset--spacing--20);
}

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

/* Shared: rounded card, no default cell borders, roomier cells. */
.wp-block-table table {
	border: 1px solid var(--wp--preset--color--grey);
	border-collapse: separate;
	border-radius: var(--wp--custom--radius--large);
	border-spacing: 0;
	font-size: var(--wp--preset--font-size--small);
	overflow: hidden;
}

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

.wp-block-table th,
.wp-block-table td {
	border: 0;
	padding: 12px 16px;
	text-align: left;
}

.wp-block-table th {
	font-weight: 700;
}

/* Default (Navy): navy header row, grey zebra rows. */
.wp-block-table:where(:not(.is-style-mint)) th {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.wp-block-table:where(:not(.is-style-mint)) th a {
	color: inherit;
}

.wp-block-table:where(:not(.is-style-mint)) tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--grey-light);
}

/* Mint style: light mint header, subtle cell lines. */
.wp-block-table.is-style-mint table {
	border-color: #D6D6D6;
}

.wp-block-table.is-style-mint th {
	background: var(--wp--preset--color--mint-light);
	border-bottom: 1px solid #D6D6D6;
}

.wp-block-table.is-style-mint td {
	border-bottom: 1px solid var(--wp--preset--color--grey);
}

.wp-block-table.is-style-mint tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-mint :is(th, td) + :is(th, td) {
	border-left: 1px solid var(--wp--preset--color--grey);
}

/* ---------- Heading rhythm in page content ---------- */

/*
 * Headings get more space above than below (the 24px block gap), so each
 * heading clearly belongs to the content that follows it.
 * Not applied when a heading is the first block on the page.
 */
.wp-block-post-content > h2:not(:first-child) {
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-post-content > :is(h3, h4):not(:first-child) {
	margin-top: var(--wp--preset--spacing--50);
}

/* A heading straight after another heading stays close to it. */
.wp-block-post-content > :is(h2, h3, h4) + :is(h2, h3, h4):not(:first-child) {
	margin-top: var(--wp--preset--spacing--40);
}

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

/* Arrow after the label, e.g. "Book your free consultation" with an arrow. */
.wp-block-button.has-arrow .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 10px;
}

.wp-block-button.has-arrow .wp-block-button__link::after {
	background: currentColor;
	content: "";
	height: 18px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	width: 18px;
}

/* Outline buttons on dark sections: softer white border. */
.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.4);
}

/*
 * Swipe hover. On hover a slightly deeper shade slides in from the left
 * across the button; the text colour stays the same. The fill is a
 * background gradient that grows from 0% to 100% wide, so no extra
 * elements are needed (the ::after is already used for the arrow).
 * theme.json keeps the hover background the same mint, so the swipe is
 * the only change. To swipe down from the top instead, use
 * background-position: center top and animate background-size from
 * 100% 0% to 100% 100%.
 */
.wp-block-button__link {
	--jobrelay-button-swipe: #00c496;
	background-image: linear-gradient(var(--jobrelay-button-swipe), var(--jobrelay-button-swipe));
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 0.4s cubic-bezier(0.65, 0, 0.35, 1), transform 0.2s ease;
}

/* It also nudges 1px up and 1px right, as if lifting towards the pointer. */
.wp-block-button__link:is(:hover, :focus-visible) {
	background-size: 100% 100%;
	transform: translate(1px, -1px);
}

/* Navy buttons swipe to a slightly lighter navy. */
.wp-block-button__link.has-navy-background-color {
	--jobrelay-button-swipe: #36406a;
}

/* Outline buttons get a faint tint: navy on light sections, white on navy. */
.wp-block-button.is-style-outline .wp-block-button__link {
	--jobrelay-button-swipe: rgba(39, 47, 79, 0.08);
}

.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	--jobrelay-button-swipe: rgba(255, 255, 255, 0.1);
}

/* No sliding for visitors who prefer less motion: the fill just appears. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}
}

/* ---------- Hero ---------- */

.hero .wp-block-column > * + * {
	margin-top: 28px;
}

.hero .hero-badge {
	background: rgba(0, 214, 165, 0.14);
	border-radius: 999px;
	color: #5BF0CB;
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.5;
	padding: 6px 14px;
}

.hero h1 {
	text-wrap: balance;
}

.hero .hero-lead {
	color: rgba(255, 255, 255, 0.82);
	max-width: 540px;
}

/* Homepage hero only: stats row and the relay flow illustration. */
.hero .hero-stats {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--wp--preset--font-size--small);
	padding-top: 8px;
}

.hero .hero-stats strong {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	margin-right: 8px;
}

.hero .hero-visual {
	margin-inline: auto;
	max-width: 500px;
}

.hero .hero-visual img {
	width: 100%;
}

/* Badge is optional: hide it when its text is cleared. */
.hero .hero-badge:empty {
	display: none;
}

/*
 * The same pill as the hero badge, for the label above a banner title:
 * a post's categories, or the "Documentation" and "Blog" links back.
 * On a paragraph the whole paragraph is the pill; on the Post Terms
 * block each category is its own pill.
 */
.banner-badge,
.wp-block-post-terms.banner-badge a {
	background: rgba(0, 214, 165, 0.14);
	border-radius: 999px;
	color: #5BF0CB;
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.5;
	padding: 6px 14px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.banner-badge a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-terms.banner-badge {
	background: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
}

/* The pills separate the categories, so the commas aren't needed. */
.wp-block-post-terms.banner-badge .wp-block-post-terms__separator {
	display: none;
}

p.banner-badge:has(a:hover),
.wp-block-post-terms.banner-badge a:hover {
	background: rgba(0, 214, 165, 0.24);
}

/* A little space between the badge and the banner title. */
.page-banner .banner-badge {
	margin-bottom: 12px;
}

/* Rounded corners only: no shadow, so transparent illustrations sit cleanly. */
.hero .hero-media {
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

.hero .hero-media img {
	display: block;
	width: 100%;
}

/* ---------- Steps list style ---------- */

/*
 * "Steps" block style for ordered lists: each item becomes a column with a
 * big mint number (01, 02...) above it. The columns wrap on smaller screens.
 */
.wp-block-list.is-style-steps {
	counter-reset: step;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	list-style: none;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

.wp-block-list.is-style-steps > li {
	border-top: 3px solid var(--wp--preset--color--navy);
	counter-increment: step;
	margin: 0;
	padding-top: 24px;
}

.wp-block-list.is-style-steps > li::before {
	color: var(--wp--preset--color--mint);
	content: counter(step, decimal-leading-zero);
	display: block;
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 16px;
}

/*
 * Heading and intro that sit beside a link in a full-width row (e.g. the
 * Numbered steps header). Without a limit the flex row lets the heading
 * stretch across the wide area; this keeps it to the normal content width.
 * The second selector catches sections added before the class existed: an
 * eyebrow and heading group inside a flex row.
 */
.section-intro,
.is-layout-flex > .wp-block-group:has(> .is-style-eyebrow:first-child + .wp-block-heading) {
	max-width: var(--wp--style--global--content-size);
}

/* ---------- Arrow link ---------- */

/* A paragraph with the link-arrow class shows a bold link with an arrow after it. */
.link-arrow a {
	align-items: center;
	display: inline-flex;
	font-weight: 700;
	gap: 8px;
	min-height: 44px;
}

.link-arrow a::after {
	background: currentColor;
	content: "";
	height: 18px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.2s ease;
	width: 18px;
}

.link-arrow a:hover::after,
.link-arrow a:focus-visible::after {
	transform: translateX(3px);
}

/* ---------- Integrations ---------- */

/*
 * Each provider is a linked Image block. The figure itself is the tile, so it
 * looks the same in the editor (where the image is wrapped in a resize box and
 * the link isn't output) and on the front end.
 */
.integration-tiles > .wp-block-image,
.integration-tiles > .integration-more {
	margin: 0;
}

.integration-tiles > .wp-block-image,
.integration-tiles .integration-more a {
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	box-sizing: border-box;
	display: flex;
	height: 72px;
	justify-content: center;
	padding: 0 16px;
	position: relative;
	transition: border-color 0.2s ease;
	width: 136px;
}

/* The link's ::after stretches over the tile so the whole tile is clickable. */
.integration-tiles > .wp-block-image a {
	display: flex;
}

.integration-tiles > .wp-block-image a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* The editor's resize wrapper would otherwise force the image to full size. */
.integration-tiles > .wp-block-image > div {
	display: flex;
	height: auto !important;
	width: auto !important;
}

/* Logos sit in grey until the tile is hovered or focused. */
.integration-tiles > .wp-block-image img {
	filter: grayscale(1);
	height: var(--logo-height, 28px) !important;
	max-width: 100%;
	opacity: 0.6;
	transition: filter 0.2s ease, opacity 0.2s ease;
	width: auto !important;
}

.integration-tiles > .wp-block-image:hover,
.integration-tiles > .wp-block-image:focus-within,
.integration-tiles .integration-more a:hover,
.integration-tiles .integration-more a:focus-visible {
	border-color: var(--wp--preset--color--mint);
}

.integration-tiles > .wp-block-image:hover img,
.integration-tiles > .wp-block-image:focus-within img {
	filter: none;
	opacity: 1;
}

/* Logos have different shapes, so each gets its own height to look the same size.
   Also used by the provider logo in the integration hero card. */
:is(.integration-tiles, .integration-connect) .logo-broadbean { --logo-height: 50px; }
:is(.integration-tiles, .integration-connect) .logo-logicmelon { --logo-height: 17px; }
:is(.integration-tiles, .integration-connect) .logo-idibu { --logo-height: 24px; }
:is(.integration-tiles, .integration-connect) .logo-jobadder { --logo-height: 18px; }
:is(.integration-tiles, .integration-connect) .logo-bullhorn { --logo-height: 36px; }
:is(.integration-tiles, .integration-connect) .logo-workable { --logo-height: 19px; }
:is(.integration-tiles, .integration-connect) .logo-loxo { --logo-height: 28px; }
:is(.integration-tiles, .integration-connect) .logo-recruit-crm { --logo-height: 18px; }
:is(.integration-tiles, .integration-connect) .logo-xml-feed { --logo-height: 30px; }
:is(.integration-tiles, .integration-connect) .logo-spott { --logo-height: 22px; }

/* The last tile is a dashed text link for anything not listed. */
.integration-tiles .integration-more a {
	border-color: #ADADAD;
	border-style: dashed;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- Integration pages (patterns/integration-*.php) ---------- */

/*
 * Hero card: the provider, JobRelay and the WordPress site as three tiles
 * joined by a dashed mint line, with a "connected" status above.
 */
.integration-connect__status {
	align-items: center;
	color: var(--wp--preset--color--mint-dark);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	gap: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.integration-connect__status::before {
	background: var(--wp--preset--color--mint);
	border-radius: 50%;
	content: "";
	height: 8px;
	width: 8px;
}

@media (prefers-reduced-motion: no-preference) {
	.integration-connect__status::before {
		animation: jobrelay-pulse 2s ease-out infinite;
	}
}

@keyframes jobrelay-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 214, 165, 0.55);
	}

	70%,
	100% {
		box-shadow: 0 0 0 8px rgba(0, 214, 165, 0);
	}
}

.integration-connect__nodes {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	position: relative;
}

/* The line runs behind the tiles, so it only shows in the gaps. */
.integration-connect__nodes::before {
	border-top: 2px dashed var(--wp--preset--color--mint);
	content: "";
	left: 16%;
	position: absolute;
	right: 16%;
	top: 50%;
}

.integration-connect__nodes > .integration-connect__node {
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	box-sizing: border-box;
	display: flex;
	height: 88px;
	justify-content: center;
	margin: 0;
	padding: 12px;
	position: relative;
}

/* The editor's resize wrapper would otherwise force the image to full size. */
.integration-connect__node > div {
	display: flex;
	height: auto !important;
	width: auto !important;
}

.integration-connect__node img {
	height: var(--logo-height, 32px) !important;
	max-width: 100%;
	object-fit: contain;
	width: auto !important;
}

.integration-connect__nodes > .integration-connect__node.is-relay {
	--logo-height: 30px;
	background: var(--wp--preset--color--mint-light);
	border-color: var(--wp--preset--color--mint);
}

.integration-connect__nodes > .integration-connect__node.is-site {
	flex-direction: column;
	gap: 4px;
}

.integration-connect__node.is-site p {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	text-align: center;
}

/* On small phones the tiles stack, and the line runs down between them. */
@media (max-width: 479px) {
	.integration-connect__nodes {
		gap: 16px;
		grid-template-columns: 1fr;
	}

	.integration-connect__nodes::before {
		border-left: 2px dashed var(--wp--preset--color--mint);
		border-top: 0;
		bottom: 10%;
		left: 50%;
		right: auto;
		top: 10%;
	}

	.integration-connect__nodes > .integration-connect__node {
		height: 72px;
	}
}

/* Feature screenshots: rounded, with a fine border so white screenshots don't blend in. */
.integration-shot img {
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	display: block;
	width: 100%;
}

.integration-shot figcaption {
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 12px;
	text-align: left;
}

/* Image-first features still show the text first when the columns stack. */
@media (max-width: 781px) {
	.integration-feature.is-image-first > .wp-block-column:first-child {
		order: 2;
	}
}

/*
 * Comparison cards: two equal columns, centred, and no wider than they
 * need to be. The grid layout stacks them when there isn't room for two.
 */
.integration-compare {
	margin-inline: auto !important;
	max-width: 960px;
}

/*
 * Setup steps reuse the CTA's numbered cards, on grey or white.
 * The CTA list resets its margin, so put back a bigger gap below the intro.
 */
.integration-setup .wp-block-list.cta-steps {
	margin-top: var(--wp--preset--spacing--50);
}

.integration-setup .wp-block-list.cta-steps > li {
	background: var(--wp--preset--color--grey-light);
}

.integration-setup.has-background .wp-block-list.cta-steps > li {
	background: var(--wp--preset--color--white);
}

.integration-timescale__figure {
	color: var(--wp--preset--color--mint);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* ---------- Testimonials ---------- */

/*
 * Masonry: CSS columns let cards of different heights pack tightly. Each
 * column is at least 20rem wide, so it's 3 across on desktop, 1 on mobile.
 * Cards flow down the first column, then the next.
 */
.testimonial-wall {
	column-gap: 20px;
	column-width: 20rem;
}

.testimonial-wall > * {
	break-inside: avoid;
	margin-block: 0 20px !important;
}

/* Quote block reset: the card already frames the quote. Top margin is left to the card's block gap. */
.testimonial-card .wp-block-quote {
	border: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

.testimonial-card .wp-block-quote > * + * {
	margin-top: 12px;
}

/* Author photo: a 48px circle. Replace the placeholder image in the editor. */
.testimonial-card .testimonial-avatar {
	flex: none;
	height: 48px;
	margin: 0;
	width: 48px;
}

.testimonial-card .testimonial-avatar > div {
	height: auto !important;
	width: auto !important;
}

.testimonial-card .testimonial-avatar img {
	border-radius: 50%;
	height: 48px !important;
	object-fit: cover;
	width: 48px !important;
}

/* ---------- Checks list style ---------- */

/* "Checks" block style for lists: a mint tick instead of a bullet. */
.wp-block-list.is-style-checks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-checks > li {
	padding-left: 30px;
	position: relative;
}

.wp-block-list.is-style-checks > li + li {
	margin-top: 10px;
}

.wp-block-list.is-style-checks > li::before {
	background: var(--wp--preset--color--mint);
	content: "";
	height: 20px;
	left: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
	position: absolute;
	top: 0.2em;
	width: 20px;
}

/* On white, a slightly darker mint keeps the tick visible. */
.has-white-background-color .wp-block-list.is-style-checks > li::before {
	background: var(--wp--preset--color--mint-dark);
}

/* ---------- Crosses list style ---------- */

/* The opposite of Checks: for problems and "what goes wrong" lists. */
.wp-block-list.is-style-crosses {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-crosses > li {
	padding-left: 30px;
	position: relative;
}

.wp-block-list.is-style-crosses > li + li {
	margin-top: 10px;
}

.wp-block-list.is-style-crosses > li::before {
	background: var(--wp--preset--color--grey-dark);
	content: "";
	height: 18px;
	left: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
	position: absolute;
	top: 0.2em;
	width: 18px;
}

/* ---------- Pricing ---------- */

/* Cards are vertical flex boxes; the list grows so buttons line up at the bottom. */
.pricing-card {
	position: relative;
}

.pricing-card > .wp-block-list {
	flex: 1;
	margin: 0;
}

/* Price: big bold amount, smaller "/ month" after it. */
.pricing-price {
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--medium);
}

.has-navy-background-color .pricing-price {
	color: rgba(255, 255, 255, 0.8);
}

.pricing-price strong {
	color: var(--wp--preset--color--navy);
	font-size: 56px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-right: 4px;
}

.has-navy-background-color .pricing-price strong {
	color: var(--wp--preset--color--white);
}

/*
 * "Best value" pill pinned to the card's top-right corner.
 * !important because the editor gives every block position: relative,
 * which would otherwise drop the pill into the card as a full-width bar.
 */
.pricing-card > .pricing-badge {
	background: var(--wp--preset--color--mint);
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 !important;
	padding: 6px 12px;
	position: absolute !important;
	right: 24px;
	top: 24px;
	width: auto !important;
}

.pricing-card > .pricing-badge:empty {
	display: none;
}

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

/* Next steps in the CTA: each item is a soft white card with a navy number circle. */
.wp-block-list.cta-steps {
	counter-reset: cta;
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-list.cta-steps > li {
	align-items: center;
	background: rgba(255, 255, 255, 0.55);
	border-radius: var(--wp--custom--radius--large);
	counter-increment: cta;
	display: flex;
	font-weight: 600;
	gap: 18px;
	margin: 0;
	padding: 18px 22px;
}

.wp-block-list.cta-steps > li::before {
	align-items: center;
	background: var(--wp--preset--color--navy);
	border-radius: 50%;
	color: var(--wp--preset--color--mint);
	content: counter(cta);
	display: flex;
	flex: none;
	font-weight: 800;
	height: 40px;
	justify-content: center;
	width: 40px;
}

/* ---------- Savings calculator ---------- */

/* The big total on the left. JavaScript updates the bold number. */
.savings-total {
	align-items: baseline;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	gap: 12px;
	padding-top: 12px;
}

.savings-total strong {
	color: var(--wp--preset--color--mint);
	font-size: clamp(56px, 7vw, 88px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

/* The calculator card. */
.savings-calc {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--x-large);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
	color: var(--wp--preset--color--navy);
	padding: 12px 32px;
}

.savings-calc__row {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--grey);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 14px 0;
}

.savings-calc__row > span:first-child {
	color: var(--wp--preset--color--grey-dark);
}

.savings-calc__row small {
	font-size: var(--wp--preset--font-size--x-small);
}

.savings-calc__field {
	align-items: center;
	display: inline-flex;
	font-weight: 700;
	gap: 6px;
	white-space: nowrap;
}

.savings-calc input {
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--medium);
	color: inherit;
	font: inherit;
	font-weight: 700;
	padding: 6px 10px;
	text-align: right;
	width: 5.5em;
}

.savings-calc input:hover {
	border-color: #ADADAD;
}

.savings-calc input:focus {
	border-color: var(--wp--preset--color--mint);
	outline: 2px solid var(--wp--preset--color--mint);
	outline-offset: 1px;
}

.savings-calc__row--plan {
	border-bottom: 2px solid var(--wp--preset--color--navy);
}

.savings-calc__row--total {
	border-bottom: 0;
	font-size: var(--wp--preset--font-size--large);
	padding: 22px 0 18px;
}

.savings-calc__row--total output {
	color: var(--wp--preset--color--mint-dark);
	font-size: 26px;
	font-weight: 800;
}

/* ---------- Search block ---------- */

/* Match the search box to the theme's buttons: same height and corners. */
.wp-block-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--medium);
	font-size: 16px;
	padding: 14px 16px;
}

.wp-block-search .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--mint);
	outline: 2px solid var(--wp--preset--color--mint);
	outline-offset: 0;
}

.wp-block-search__inside-wrapper {
	gap: 8px;
}

.wp-block-search .wp-block-search__button {
	margin-left: 0;
}

/* ---------- Accordion (FAQs) ---------- */

/*
 * Each question is a card; the + icon becomes a mint circle.
 * Covers the core Accordion block and the Yoast FAQ block
 * (made collapsible by assets/js/faq-toggle.js).
 */
.wp-block-accordion,
.schema-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wp-block-accordion-item {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	margin: 0 !important;
	padding: 0 24px;
}

.wp-block-accordion-item.is-open {
	border-color: var(--wp--preset--color--mint);
}

.wp-block-accordion-heading {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.wp-block-accordion-heading__toggle {
	gap: 16px;
	padding: 20px 0;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion-heading__toggle-icon {
	background: var(--wp--preset--color--mint-light);
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	flex-shrink: 0;
	font-weight: 400;
	height: 32px;
	width: 32px;
}

.wp-block-accordion-panel {
	color: var(--wp--preset--color--grey-dark);
	padding-bottom: 20px;
}

/* Yoast FAQ block: same card look as the core Accordion above. */
.schema-faq-section {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	margin: 0 !important;
	padding: 20px 24px;
}

.schema-faq-section.is-open {
	border-color: var(--wp--preset--color--mint);
}

.schema-faq-question {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.schema-faq-answer {
	color: var(--wp--preset--color--grey-dark);
	margin: 12px 0 0;
}

/* Added by faq-toggle.js. */
.schema-faq-section:has(.schema-faq-toggle) {
	padding-block: 0;
}

.schema-faq-toggle {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 16px;
	padding: 20px 0;
	text-align: left;
	width: 100%;
}

.schema-faq-toggle__title {
	flex: 1;
}

.schema-faq-toggle__icon {
	align-items: center;
	background: var(--wp--preset--color--mint-light);
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	display: flex;
	flex-shrink: 0;
	font-weight: 400;
	height: 32px;
	justify-content: center;
	transition: transform 0.2s ease-in-out;
	width: 32px;
}

.schema-faq-toggle[aria-expanded="true"] .schema-faq-toggle__icon {
	transform: rotate(45deg);
}

.schema-faq-section:has(.schema-faq-toggle) .schema-faq-answer {
	margin-top: 0;
	padding-bottom: 20px;
}

/* ---------- Form elements ---------- */

/*
 * Base styles for plain HTML form fields, used by plugins such as Easy
 * Digital Downloads and by the search block. Wrapped in :where() so they
 * have zero specificity: any plugin or block styles still win.
 */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="range"], [type="color"]), select, textarea) {
	background-color: var(--wp--preset--color--white);
	border: 1px solid #8A8FA0;
	border-radius: var(--wp--custom--radius--medium);
	box-sizing: border-box;
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming in on focus. */
	line-height: 1.4;
	max-width: 100%;
	padding: 12px 14px;
}

:where(textarea) {
	min-height: 140px;
	resize: vertical;
}

:where(select) {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23272F4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 18px;
	padding-right: 40px;
}

:where(input, select, textarea)::placeholder {
	color: var(--wp--preset--color--grey-dark);
	opacity: 1;
}

/* Mint-dark focus ring, the same as Gravity Forms fields. */
:where(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--mint-dark);
	outline: 2px solid var(--wp--preset--color--mint-dark);
	outline-offset: 0;
}

:where(input, select, textarea):disabled {
	background-color: var(--wp--preset--color--grey-light);
	cursor: not-allowed;
}

/* Native ticks and dots in the brand colour. */
:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--mint-dark);
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	width: 18px;
}

:where(label) {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

:where(fieldset) {
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	margin: 0 0 24px;
	padding: 24px;
}

:where(legend) {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	padding: 0 8px;
}

/* Plain submit buttons look like the theme's mint button. */
:where(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"]):not(.wp-element-button, .components-button) {
	background-color: var(--wp--preset--color--mint);
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	padding: 14px 26px;
}

:where(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"]):not(.wp-element-button, .components-button):hover {
	background-color: #00C496;
}

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

/*
 * Colours, sizes and rounding come from the gform_default_styles filter in
 * functions.php. These are the extra CSS variables that filter can't set.
 * Two classes so we beat Gravity Forms' own single-class defaults.
 */
.gform-theme.gform-theme--framework {
	--gf-font-family-base: inherit;
	--gf-ctrl-label-font-weight-primary: 600;
	--gf-ctrl-btn-font-weight: 700;
}

/* Submit button: same hover as the theme's buttons. */
.gform-theme--framework .gform_footer .gform_button:hover,
.gform-theme--framework .gform_page_footer .gform_button:hover {
	background-color: #00C496;
}

/* ---------- Easy Digital Downloads ---------- */

/*
 * Styles for the EDD blocks: checkout, login, register, profile editor,
 * order history, receipt and downloads. EDD's own selectors are quite
 * specific, so some rules here are prefixed with .wp-site-blocks or the
 * form id to make sure they win.
 */

/*
 * EDD draws all its borders with this variable. Setting it on body (not
 * :root) means it wins whichever stylesheet loads first.
 */
body {
	--edd-blocks-light-grey: var(--wp--preset--color--grey);
}

/* Forms sit in white cards, like the accordion and fieldset styles. */
.wp-site-blocks .edd-blocks-form,
.wp-site-blocks .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	padding: clamp(20px, 4vw, 32px);
}

/* The checkout's cart and purchase wrappers are not cards themselves. */
.wp-site-blocks .wp-block-edd-checkout .edd-blocks-form__cart,
.wp-site-blocks .wp-block-edd-checkout .edd-blocks-form__purchase {
	background-color: transparent;
	border: 0;
	padding: 0;
}

/*
 * EDD wraps checkout sections in fieldsets. The form is already a card,
 * so drop the theme's fieldset border to avoid boxes inside boxes.
 */
.edd-blocks-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Section headings inside the checkout, e.g. "Personal Info". Browsers
 * draw a legend on top of the fieldset's border; floating it puts it
 * inside the card like a normal heading.
 */
.wp-site-blocks .edd-blocks-form legend {
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}

/*
 * Fields: put back the base form styles, which EDD's own padding
 * (4px 6px) overrides.
 */
.wp-site-blocks .edd-blocks-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea),
.wp-site-blocks .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea) {
	padding: 12px 14px;
}

.wp-site-blocks .edd-blocks-form select,
.wp-site-blocks .wp-block-edd-checkout #edd_purchase_form select {
	padding-right: 40px;
}

/* Leave room for the show/hide password button. */
.wp-site-blocks .edd-blocks-form .wp-pwd :is(input[type="password"], input[type="text"]) {
	padding-right: 44px;
}

.wp-site-blocks .edd-blocks-form .wp-hide-pw {
	padding: 0 12px;
}

/* Field descriptions under labels. */
.edd-blocks-form .edd-description {
	color: var(--wp--preset--color--grey-dark);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 8px;
}

.edd-blocks-form .edd-required-indicator {
	color: #C02B2B;
}

/*
 * Primary buttons (Log in, Register, Purchase, Save changes). The blue
 * colour class is removed in functions.php, so these only need to beat
 * EDD's plain .edd-submit rules.
 */
.wp-site-blocks .edd-submit,
.wp-site-blocks .edd-submit.button,
.wp-site-blocks [type="submit"].edd-submit,
.wp-site-blocks #edd-purchase-button {
	background-color: var(--wp--preset--color--mint);
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	padding: 14px 26px;
	white-space: normal;
}

.wp-site-blocks #edd-purchase-button:is(:hover, :focus-visible),
.wp-site-blocks .edd-submit:is(:hover, :focus-visible),
.wp-site-blocks .edd-submit.button:is(:hover, :focus-visible) {
	background-color: #00C496;
	color: var(--wp--preset--color--navy);
}

.wp-site-blocks .edd-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--mint-dark);
	outline-offset: 2px;
}

/*
 * The Purchase button has an id selector in EDD's CSS, so it's targeted
 * by id here too. It fills the width of the checkout and is a bit larger.
 */
.wp-site-blocks #edd-purchase-button {
	font-size: 18px;
	padding: 18px 26px;
	width: 100%;
}

/* Secondary buttons (Generate password, Enter a discount code). */
.wp-site-blocks .edd-button-secondary,
.wp-site-blocks .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 10px 18px;
}

.wp-site-blocks .edd-button-secondary:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--mint-light);
}

/* Payment method choices become rounded tiles; the chosen one is mint. */
.wp-site-blocks .wp-block-edd-checkout #edd-payment-mode-wrap label.edd-gateway-option {
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--medium);
	font-weight: 600;
	padding: 12px 16px;
}

.wp-site-blocks .wp-block-edd-checkout #edd-payment-mode-wrap label.edd-gateway-option:hover {
	background-color: var(--wp--preset--color--grey-light);
}

.wp-site-blocks .wp-block-edd-checkout #edd-payment-mode-wrap label.edd-gateway-option.edd-gateway-option-selected {
	background-color: var(--wp--preset--color--mint-light);
	border-color: var(--wp--preset--color--mint-dark);
}

/* Checkout cart: a rounded card with a grey header row. */
.wp-site-blocks .edd-blocks-form__cart #edd_checkout_cart {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

.edd-blocks-form__cart .edd-blocks-cart__row-header {
	background-color: var(--wp--preset--color--grey-light);
	color: var(--wp--preset--color--navy);
}

.edd-blocks-form__cart .edd-blocks-cart__row,
.edd-blocks-form__cart .edd_cart_footer_row {
	padding: 16px 24px;
}

.edd-blocks-form__cart .edd_cart_footer_row + .edd_cart_footer_row {
	border-top: 1px solid var(--wp--preset--color--grey);
}

.edd-blocks-form__cart .edd_cart_total {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
}

/* Order history, receipts and downloads: rounded cards. */
.edd-blocks-orders__order,
.edd-blocks-receipt__items,
.edd-blocks-receipt__totals,
div.edd-blocks__user-downloads {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--large);
	padding: 24px;
}

.edd-blocks-orders__order-id,
.edd-blocks-receipt__row-header {
	color: var(--wp--preset--color--navy);
}

/* Messages such as "Your password is incorrect". */
.edd-alert {
	border-radius: var(--wp--custom--radius--medium);
	padding: 12px 16px;
}

.edd-alert-error {
	background-color: #FDECEC;
	border-color: #F3B8B8;
	color: #8A1F1F;
}

.edd-alert-success {
	background-color: var(--wp--preset--color--mint-light);
	border-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--navy);
}

.edd-alert-info,
.edd-alert-warn {
	background-color: var(--wp--preset--color--grey-light);
	border-color: var(--wp--preset--color--grey);
	color: var(--wp--preset--color--navy);
}

/*
 * Checkout extras: the terms and privacy agreements, and the purchase
 * button's wrapper. These are fieldsets outside the form cards, so the
 * theme's fieldset border is removed and they sit as plain rows.
 */
#edd_purchase_form fieldset:not(.edd-blocks-form) {
	border: 0;
	margin: 0 0 16px;
	padding: 0;
}

/* The "Agree to..." tickbox rows. */
.edd-terms-agreement,
.edd-privacy-policy-agreement {
	align-items: center;
	display: flex;
	gap: 4px;
}

.edd-terms-agreement label,
.edd-privacy-policy-agreement label {
	margin: 0;
}

/* "Show Terms" links sit above their tickbox. */
.edd-show-terms {
	margin-bottom: 8px;
}

/* The terms text, when shown, is a scrolling grey panel. */
.edd-terms {
	background-color: var(--wp--preset--color--grey-light);
	border-radius: var(--wp--custom--radius--medium);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 12px;
	max-height: 320px;
	overflow-y: auto;
	padding: 16px 20px;
}

/*
 * EDD's older shortcode forms: [edd_profile_editor], [edd_login] and
 * [edd_register]. They use a .edd_form class rather than the block
 * classes, with each field in a <p> and each section in a fieldset.
 * These rules stack labels above full-width fields, to match the blocks.
 */
.edd_form {
	max-width: 720px;
}

/* Each section is a white card, like the block forms. */
.edd_form fieldset {
	background-color: var(--wp--preset--color--white);
	display: grid;
	gap: 20px;
	padding: clamp(20px, 4vw, 32px);
}

/* Section headings sit inside the card, not on its border. */
.edd_form legend {
	float: left;
	margin: 0 0 4px;
	padding: 0;
	width: 100%;
}

/* Field rows: label on top, field full width underneath. */
.edd_form fieldset > p {
	margin: 0;
}

#edd_profile_editor_form label,
.edd_form fieldset > p > label {
	display: block;
	margin-bottom: 8px;
}

.edd_form :is(input.edd-input, select.edd-select) {
	width: 100%;
}

/* EDD makes required fields black; keep them the theme's navy. */
.edd_form input.edd-input.required,
.edd_form select.edd-select.required {
	color: var(--wp--preset--color--navy);
}

/* The save button doesn't need a card of its own. */
#edd_profile_submit_fieldset,
.edd_form fieldset:has(> p > .edd-submit:only-of-type):not(:has(legend)) {
	background-color: transparent;
	border: 0;
	padding: 0;
}

/* Additional email addresses on the profile editor. */
#edd_profile_editor_form .edd-profile-emails {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* ---------- Documentation (jobrelay_docs) ---------- */

/* "Documentation" link above the doc's title in the banner. */


/* "Last updated" date under the title. */
.docs-updated {
	margin-top: 12px;
	opacity: 0.8;
}

/*
 * Sidebar list of all docs. It stays in view while the doc scrolls, and
 * scrolls itself if the list is taller than the window.
 */
@media (min-width: 782px) {
	.docs-sidebar {
		align-self: flex-start;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		position: sticky;
		top: 24px;
	}
}

.docs-sidebar__title {
	color: var(--wp--preset--color--grey-dark);
	letter-spacing: 0.06em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

/*
 * The docs tree (blocks/docs-nav). A grey line runs down the left; the
 * doc being read gets a mint marker on that line. Child docs are indented
 * with their own line.
 */
.docs-nav__list,
.docs-nav .children {
	border-left: 2px solid var(--wp--preset--color--grey);
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.docs-nav .children {
	margin: 2px 0 6px 16px;
}

.docs-nav li {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin: 0;
}

.docs-nav a {
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--navy);
	display: block;
	font-weight: 500;
	margin-left: -2px;
	padding: 6px 0 6px 16px;
	text-decoration: none;
}

.docs-nav a:hover {
	color: var(--wp--preset--color--mint-dark);
}

/* Parents of the current doc are bold, so you can see where you are. */
.docs-nav .current_page_ancestor > a {
	font-weight: 700;
}

/* The doc being read. wp_list_pages() adds aria-current="page". */
.docs-nav a[aria-current="page"] {
	border-left-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--mint-dark);
	font-weight: 700;
}

/* Keep long docs to a readable line length. */
.docs-content {
	max-width: var(--wp--style--global--content-size);
	min-width: 0;
}

/*
 * The doc comes first and the sidebar sits on the right. The sidebar is
 * pushed to the far right of the wide area, so the doc lines up with the
 * banner title on the left. On phones the columns stack, so the list of
 * docs naturally goes under the doc.
 */
@media (min-width: 782px) {
	.docs-layout > .docs-sidebar {
		margin-left: auto;
	}
}

@media (max-width: 781px) {
	.docs-sidebar {
		border-top: 1px solid var(--wp--preset--color--grey);
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* Docs archive: each doc is a white card. */
.docs-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	gap: 8px;
	height: 100%;
	padding: 24px;
	transition: border-color 0.2s ease;
}

.docs-card:hover {
	border-color: var(--wp--preset--color--mint);
}

.docs-card .wp-block-post-title {
	margin: 0;
}

.docs-card .wp-block-post-title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.docs-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--grey-dark);
	margin: 0;
}

/*
 * Docs search in the banner: a white box with the mint button, kept to a
 * comfortable width and lined up with the title.
 */
.docs-search-wrap {
	margin-top: var(--wp--preset--spacing--40);
}

.docs-search {
	max-width: 560px;
}

.docs-search .wp-block-search__input {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.docs-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--grey-dark);
}

/* The mint focus ring shows up well against the navy. */
.docs-search .wp-block-search__input:focus {
	outline-offset: 2px;
}

/* ---------- Details block and table of contents ---------- */

/*
 * The "In this article" box at the top of docs: a SimpleTOC block inside
 * a core Details block. SimpleTOC's own "hide in a details box" option
 * (details.simpletoc) gets the same look. It's a mint-tinted card with a
 * chevron in a white circle, like the accordion's toggle icon.
 */
:is(.wp-block-details, details.simpletoc) {
	background-color: var(--wp--preset--color--mint-light);
	border: 1px solid #BFEFE0;
	border-radius: var(--wp--custom--radius--large);
	padding: 0 24px;
}

:is(.wp-block-details, details.simpletoc) > summary {
	align-items: center;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	display: flex;
	font-weight: 700;
	gap: 12px;
	justify-content: space-between;
	list-style: none; /* Hides the default triangle (Firefox). */
	padding: 16px 0;
}

/* Hides the default triangle (Safari). */
:is(.wp-block-details, details.simpletoc) > summary::-webkit-details-marker {
	display: none;
}

/* Chevron in a white circle: points down when closed, up when open. */
:is(.wp-block-details, details.simpletoc) > summary::after {
	background: var(--wp--preset--color--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23272F4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
	border-radius: 999px;
	content: "";
	flex-shrink: 0;
	height: 32px;
	transition: transform 0.2s ease;
	width: 32px;
}

:is(.wp-block-details, details.simpletoc)[open] > summary::after {
	transform: rotate(180deg);
}

:is(.wp-block-details, details.simpletoc) > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--mint-dark);
	outline-offset: 2px;
}

/* A divider between the summary and the list when open. */
:is(.wp-block-details, details.simpletoc)[open] > summary {
	border-bottom: 1px solid #BFEFE0;
	margin-bottom: 16px;
}

:is(.wp-block-details, details.simpletoc) > :last-child {
	margin-bottom: 20px;
}

/*
 * SimpleTOC's list of jump links: no bullets, each link on its own line
 * in mint dark with a small arrow, so it reads as navigation. Sub-headings
 * are indented underneath.
 */
.simpletoc-list {
	display: grid;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.simpletoc-list .simpletoc-list,
.simpletoc-list :is(ul, ol) {
	display: grid;
	gap: 6px;
	list-style: none;
	margin-top: 6px;
	padding-left: 20px;
}

/* Nested lists for h3s don't always carry the class, so clear bullets on every item. */
.simpletoc-list li {
	list-style: none;
}

.simpletoc-list a {
	color: var(--wp--preset--color--mint-dark);
	font-weight: 600;
	text-decoration: none;
}

.simpletoc-list a::before {
	content: "\2192";
	margin-right: 8px;
}

.simpletoc-list a:hover {
	text-decoration: underline;
}

/*
 * When a jump link is clicked, scroll smoothly and leave a gap above the
 * heading. Visitors who prefer reduced motion get an instant jump.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.docs-content :is(h2, h3, h4)[id] {
	scroll-margin-top: 24px;
}

/* "Last updated" label before the doc's modified date in the banner. */
.docs-updated::before {
	content: "Last updated ";
}

/* ---------- Code ---------- */

/*
 * Code blocks are left to the syntax highlighting plugin. Only inline
 * code in a sentence (e.g. contact_name) is styled here.
 */
:where(p, li, td, dd) > code {
	background-color: var(--wp--preset--color--grey-light);
	border-radius: var(--wp--custom--radius--small);
	font-size: 0.9em;
	padding: 2px 6px;
}

/*
 * Docs search at the top of the sidebar: a compact box with the
 * magnifying glass button inside it, on the right.
 */
.docs-sidebar__search {
	margin-bottom: var(--wp--preset--spacing--40);
}

.docs-sidebar__search .wp-block-search__inside-wrapper {
	background-color: var(--wp--preset--color--white);
	border: 1px solid #8A8FA0;
	border-radius: var(--wp--custom--radius--medium);
	padding: 4px;
}

.docs-sidebar__search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--mint-dark);
	outline: 2px solid var(--wp--preset--color--mint-dark);
}

/* The box draws the border and focus ring, so the input itself doesn't. */
.docs-sidebar__search .wp-block-search__input {
	border: 0;
	font-size: 15px;
	padding: 8px 10px;
}

.docs-sidebar__search .wp-block-search__input:focus {
	outline: 0;
}

.docs-sidebar__search .wp-block-search__button {
	border-radius: var(--wp--custom--radius--small);
	padding: 8px 10px;
}

.docs-sidebar__search .wp-block-search__button svg {
	height: 20px;
	width: 20px;
}

/* ---------- Child docs (blocks/child-docs) ---------- */

/*
 * Cards for the children of a doc that groups others, like Guides, below
 * its content. Same look as the docs hub topic cards. The whole card is
 * clickable: the title link's ::after is stretched over it.
 */
.child-docs {
	margin-top: var(--wp--preset--spacing--60);
}

/* No gap above the cards when the doc has no content of its own. */
.wp-block-post-content:empty + .child-docs {
	margin-top: 0;
}

.child-docs__list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.child-docs__card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	position: relative;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.child-docs__card:hover,
.child-docs__card:focus-within {
	border-color: var(--wp--preset--color--mint);
	box-shadow: 0 8px 24px rgba(39, 47, 79, 0.08);
	transform: translateY(-2px);
}

.child-docs__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	padding-right: 28px;
}

.child-docs__title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

/* Stretch the link over the whole card. */
.child-docs__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* Arrow in the top right corner, nudged on hover. */
.child-docs__card::after {
	color: var(--wp--preset--color--mint-dark);
	content: "\2192";
	font-weight: 700;
	position: absolute;
	right: 24px;
	top: 24px;
	transition: transform 0.2s ease;
}

.child-docs__card:hover::after,
.child-docs__card:focus-within::after {
	transform: translateX(3px);
}

.child-docs__title a:focus-visible {
	outline: none;
}

.child-docs__card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--mint-dark);
	outline-offset: 2px;
}

.child-docs__summary {
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* "5 articles", for children that have docs of their own. */
.child-docs__count {
	color: var(--wp--preset--color--mint-dark);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: auto 0 0;
	padding-top: 8px;
	text-transform: uppercase;
}

/* Editor note, shown in the template editor where there's no doc. */
.child-docs__placeholder {
	border: 1px dashed var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	padding: 16px 20px;
}

@media (prefers-reduced-motion: reduce) {
	.child-docs__card,
	.child-docs__card::after {
		transition: none;
	}

	.child-docs__card:hover,
	.child-docs__card:focus-within,
	.child-docs__card:hover::after,
	.child-docs__card:focus-within::after {
		transform: none;
	}
}

/* ---------- Docs hub (/docs/ landing page) ---------- */

.docs-hub {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.docs-hub__heading {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Topic cards: three across on desktop, one on phones. */
.docs-hub__topics {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.docs-hub__topic {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.docs-hub__topic:hover {
	border-color: var(--wp--preset--color--mint);
	box-shadow: 0 8px 24px rgba(39, 47, 79, 0.08);
}

/* A mint book icon above each topic's title. */
.docs-hub__topic::before {
	background: var(--wp--preset--color--mint-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300805F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E") center / 22px no-repeat;
	border-radius: var(--wp--custom--radius--large);
	content: "";
	height: 44px;
	width: 44px;
}

/*
 * Topic icons, matched by a word in the topic doc's slug (so "hooks"
 * matches jobrelay-hooks too). Only the image changes;
 * the mint tile behind it comes from the rule above. Topics without their
 * own icon keep the book. Icons are from the Lucide set (lucide.dev).
 */

/* Help: question mark in a circle. */
.docs-hub__topic[class*="help"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300805F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* Guides: a folded map. */
.docs-hub__topic[class*="guides"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300805F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.1 5.1 9.9 3a2 2 0 0 0-1.8 0L3.6 5.3A1 1 0 0 0 3 6.2v12.2a1 1 0 0 0 1.4.9l3.7-1.9a2 2 0 0 1 1.8 0l4.2 2.1a2 2 0 0 0 1.8 0l4.5-2.3a1 1 0 0 0 .6-.9V4.1a1 1 0 0 0-1.4-.9l-3.7 1.9a2 2 0 0 1-1.8 0'/%3E%3Cpath d='M15 5.8v15'/%3E%3Cpath d='M9 3.2v15'/%3E%3C/svg%3E");
}

/* Hooks: code brackets. */
.docs-hub__topic[class*="hooks"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300805F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E");
}

/* Field reference guide: arrows between two boxes, for mapping fields. */
.docs-hub__topic[class*="field-reference"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300805F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='6' height='10' x='1.5' y='7' rx='1.5'/%3E%3Crect width='6' height='10' x='16.5' y='7' rx='1.5'/%3E%3Cpath d='M10 10h4l-1.5-1.5'/%3E%3Cpath d='M14 14h-4l1.5 1.5'/%3E%3C/svg%3E");
}

.docs-hub__topic-title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.docs-hub__topic-title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.docs-hub__summary {
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* The topic's first few articles, with a divider above. */
.docs-hub__articles {
	border-top: 1px solid var(--wp--preset--color--grey);
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 4px 0 0;
	padding: 16px 0 0;
}

.docs-hub__articles li {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.docs-hub__articles a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.docs-hub__articles a:hover {
	color: var(--wp--preset--color--mint-dark);
	text-decoration: underline;
}

/* "View all" sits at the bottom of the card, so cards line up. */
.docs-hub__more {
	color: var(--wp--preset--color--mint-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin-top: auto;
	padding-top: 8px;
	text-decoration: none;
}

.docs-hub__more::after {
	content: " \2192";
}

.docs-hub__more:hover {
	text-decoration: underline;
}

/* Reference docs: a two-column list of rows with an arrow. */
.docs-hub__reference {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.docs-hub__reference a {
	align-items: center;
	background-color: var(--wp--preset--color--grey-light);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--large);
	color: var(--wp--preset--color--navy);
	display: grid;
	gap: 2px 16px;
	grid-template-columns: 1fr auto;
	height: 100%;
	padding: 16px 20px;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.docs-hub__reference a::after {
	color: var(--wp--preset--color--mint-dark);
	content: "\2192";
	font-weight: 700;
	grid-column: 2;
	grid-row: 1 / span 2;
}

.docs-hub__reference a:hover {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--mint);
}

.docs-hub__reference-title {
	font-weight: 600;
}

.docs-hub__reference-summary {
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--small);
	grid-column: 1;
}

/* "Can't find what you need?" band at the bottom of the hub. */
.docs-help {
	border-radius: var(--wp--custom--radius--x-large);
	gap: var(--wp--preset--spacing--40);
}

.docs-help__text {
	max-width: 560px;
}

.docs-help__text > * {
	margin: 0;
}

.docs-help__text > * + * {
	margin-top: 8px;
}

/* ---------- Blog posts (single.html) ---------- */

/* Category links above the title in the banner, in mint. */


/* Date and reading time under the title. */
.post-meta {
	margin-top: 12px;
	opacity: 0.8;
}

.post-meta > * {
	margin: 0;
}

/* The featured image sits above the article, lined up with the text. */
.post-hero-image {
	margin-bottom: var(--wp--preset--spacing--50);
	overflow: hidden;
}

/* Tags as small grey pills after the article. */
.post-tags a {
	background-color: var(--wp--preset--color--grey-light);
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	display: inline-block;
	padding: 4px 12px;
	text-decoration: none;
}

.post-tags a:hover {
	background-color: var(--wp--preset--color--mint-light);
}

/* Hide the commas between tags; the pills separate them. */
.post-tags .wp-block-post-terms__separator {
	display: none;
}

.post-tags a + a,
.post-tags a + .wp-block-post-terms__separator + a {
	margin-left: 6px;
}

/* Previous / next post links, split either side with a divider above. */
.post-nav {
	border-top: 1px solid var(--wp--preset--color--grey);
	gap: 24px;
	padding-top: var(--wp--preset--spacing--40);
}

.post-nav .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.post-nav a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration: none;
}

.post-nav a:hover {
	color: var(--wp--preset--color--mint-dark);
}

/* The "Previous post" / "Next post" label above each title. */
.post-nav .post-navigation-link__label {
	color: var(--wp--preset--color--grey-dark);
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* "More from the blog": white cards with the image on top. */
.more-posts .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--40);
}

.post-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	gap: 0;
	height: 100%;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.post-card:hover {
	border-color: var(--wp--preset--color--mint);
}

.post-card .wp-block-post-featured-image {
	margin: 0;
	width: 100%;
}

.post-card__body {
	gap: 8px;
	padding: 20px 24px 24px;
}

.post-card__body > * {
	margin: 0;
}

.post-card .wp-block-post-date {
	color: var(--wp--preset--color--grey-dark);
}

/* Card titles are x-large (21-24px); tighten the line height to suit. */
.post-card .wp-block-post-title {
	line-height: 1.25;
}

.post-card .wp-block-post-title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--mint-dark);
}

/* ---------- Blog listing (home.html, archive.html) ---------- */

/* Intro line under a banner title, kept to a readable width. */
.banner-intro {
	margin-top: 12px;
	max-width: 640px;
	opacity: 0.85;
}

/*
 * Category links in the blog banner, as outlined pills. Clicking one
 * goes to that category's archive.
 */
.blog-categories {
	margin-top: var(--wp--preset--spacing--40);
}

.blog-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-categories__list a {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	color: var(--wp--preset--color--white);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 6px 14px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-categories__list a:hover {
	background-color: var(--wp--preset--color--mint);
	border-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--navy);
}

/* Post cards in the listing also show a short excerpt. */
.post-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--grey-dark);
}

.post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Page numbers under the grid. */
.post-pagination {
	gap: 8px;
	margin-top: var(--wp--preset--spacing--60);
}

.post-pagination :is(a, .page-numbers) {
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	padding: 8px 14px;
	text-decoration: none;
}

.post-pagination a:hover {
	background-color: var(--wp--preset--color--mint-light);
}

.post-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/*
 * Blog post layout: article on the left (two thirds), table of contents
 * on the right (one third). Full-width blocks in the article stay within
 * the article column.
 */
.post-layout__main {
	min-width: 0; /* Lets wide code or tables scroll instead of stretching. */
}

.post-layout__main > .wp-block-post-content > .alignfull,
.post-layout__main > .wp-block-post-content > .alignwide {
	margin-left: 0;
	margin-right: 0;
	width: auto;
}

/*
 * The sidebar (author card and table of contents) stays in view as you
 * scroll the article. It scrolls itself if it's taller than the window.
 */
@media (min-width: 782px) {
	.post-sidebar {
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		position: sticky;
		top: 24px;
	}

	.post-layout__sidebar {
		align-self: stretch;
	}
}

/*
 * On phones the sidebar drops below the article. The author card is
 * still useful there, but the contents list isn't, so it's hidden.
 */
@media (max-width: 781px) {
	.post-layout__sidebar .post-toc {
		display: none;
	}
}

/* The author card and contents card fill the sidebar's width. */
.post-sidebar > * {
	width: 100%;
}

/* The contents card: white, with a grey border, like the docs cards. */
.post-toc {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--large);
	padding: 24px;
}

.post-toc .simpletoc-title {
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

/*
 * A grey line down the left, like the docs sidebar. The section you're
 * reading gets a mint marker (set by assets/js/toc-spy.js).
 */
.post-toc .simpletoc-list {
	border-left: 2px solid var(--wp--preset--color--grey);
	gap: 2px;
}

.post-toc .simpletoc-list .simpletoc-list,
.post-toc .simpletoc-list :is(ul, ol) {
	border-left: 0;
	margin-top: 2px;
	padding-left: 12px;
}

.post-toc .simpletoc-list a {
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--navy);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	margin-left: -2px;
	padding: 6px 0 6px 14px;
}

/* No arrows here; the line and marker do that job. */
.post-toc .simpletoc-list a::before {
	content: none;
}

.post-toc .simpletoc-list a:hover {
	color: var(--wp--preset--color--mint-dark);
	text-decoration: none;
}

.post-toc .simpletoc-list a[aria-current="location"] {
	border-left-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--mint-dark);
	font-weight: 700;
}

/* Leave space above a heading when jumping to it from the contents. */
.post-layout__main :is(h2, h3, h4)[id] {
	scroll-margin-top: 24px;
}

/*
 * Author card at the top of the post sidebar: avatar centred at the top,
 * then "By [name]", the bio and links underneath, all centred. Details
 * come from the author's WordPress profile (Users > Profile).
 */
.author-card {
	align-items: center;
	background-color: var(--wp--preset--color--grey-light);
	border-radius: var(--wp--custom--radius--large);
	box-sizing: border-box;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	text-align: center;
}

.author-card .wp-block-post-author__avatar {
	margin: 0;
}

.author-card .wp-block-post-author__avatar img {
	border: 3px solid var(--wp--preset--color--white);
	border-radius: 999px;
	display: block;
}

.author-card .wp-block-post-author__content {
	min-width: 0;
}

/* "By" and the name sit on one line: "By Mark Wilkinson". */
.author-card .wp-block-post-author__byline,
.author-card .wp-block-post-author__name {
	display: inline;
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.author-card .wp-block-post-author__byline {
	color: var(--wp--preset--color--grey-dark);
	font-weight: 400;
}

.author-card .wp-block-post-author__byline::after {
	content: " ";
}

.author-card .wp-block-post-author__name {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.author-card .wp-block-post-author__bio {
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin: 8px 0 0;
}

/* "All posts" and "LinkedIn" links under the author's bio. */
.author-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: center;
	margin: 12px 0 0;
}

.author-card__links a {
	align-items: center;
	color: var(--wp--preset--color--mint-dark);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	gap: 6px;
	text-decoration: none;
}

.author-card__links a:hover {
	text-decoration: underline;
}

.author-card__posts::after {
	content: "\2192";
}

/* LinkedIn's "in" logo before the link text. */
.author-card__linkedin::before {
	background-color: currentColor;
	content: "";
	height: 16px;
	-webkit-mask: 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.35V9h3.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") center / contain no-repeat;
	mask: 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.35V9h3.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") center / contain no-repeat;
	width: 16px;
}

/* Text for screen readers only, e.g. "(opens in a new tab)". */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Code heading style ---------- */

/*
 * "Code heading" style for the Heading block (styles/code-heading.json),
 * e.g. for a function or hook name in the docs. Font and size (36px, at
 * every heading level) come from the style file. A font size picked on
 * the block itself still wins.
 *
 * Long names can't break at spaces, so let them wrap anywhere.
 */
.is-style-code-heading {
	overflow-wrap: anywhere;
}

/* ---------- FAQ page (patterns/faq-page.php) ---------- */

/* Intro and "posting provider" note above the questions. */
.faq-intro {
	margin-bottom: var(--wp--preset--spacing--60);
}

.faq-intro > .has-large-font-size {
	color: var(--wp--preset--color--grey-dark);
}

/*
 * Topics list on the left. It stays in view while the questions scroll,
 * and the topic you're reading is highlighted (assets/js/toc-spy.js).
 */
@media (min-width: 782px) {
	.faq-nav {
		align-self: flex-start;
		position: sticky;
		top: 24px;
	}
}

.faq-nav__title {
	color: var(--wp--preset--color--grey-dark);
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.faq-nav__list {
	border-left: 2px solid var(--wp--preset--color--grey);
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-nav__list li {
	margin: 0;
}

.faq-nav__list a {
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--navy);
	display: block;
	font-weight: 600;
	margin-left: -2px;
	padding: 8px 0 8px 16px;
	text-decoration: none;
}

.faq-nav__list a:hover {
	color: var(--wp--preset--color--mint-dark);
}

.faq-nav__list a[aria-current="location"] {
	border-left-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--mint-dark);
}

/*
 * On phones the topics become a row of pills above the questions, so
 * you can still jump straight to one.
 */
@media (max-width: 781px) {
	.faq-nav__title {
		display: none;
	}

	.faq-nav__list {
		border: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.faq-nav__list a {
		background-color: var(--wp--preset--color--grey-light);
		border: 0;
		border-radius: 999px;
		font-size: var(--wp--preset--font-size--small);
		margin: 0;
		padding: 6px 14px;
	}
}

.faq-content {
	min-width: 0;
}

/* Each topic: a heading, then its questions. */
.faq-section + .faq-section {
	margin-top: var(--wp--preset--spacing--70);
}

.faq-section__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 var(--wp--preset--spacing--40);
	scroll-margin-top: 24px;
}

.faq-section {
	scroll-margin-top: 24px;
}

/* Space between the questions and the "Still have a question?" band. */
.faq-layout + .docs-help {
	margin-top: var(--wp--preset--spacing--70);
}

/*
 * Page banner intro: the page's excerpt under the title (templates/page.html).
 * Reuses .banner-intro for size and colour; the excerpt block wraps its
 * text in a paragraph, so remove that paragraph's default margins.
 */
.page-banner__intro .banner-intro p {
	margin: 0;
}

/*
 * Stop wide content pushing the page sideways on phones.
 *
 * If anything is wider than the screen, mobile browsers zoom the whole
 * page out to fit it, which shrinks the header and banner. The usual
 * culprits in docs and posts are code blocks with long lines, wide
 * tables, embeds and long unbroken URLs. These scroll or wrap inside
 * their own box instead.
 */
pre {
	max-width: 100%;
	overflow-x: auto;
}

.entry-content :is(img, video, iframe, embed, object) {
	max-width: 100%;
}

.entry-content .wp-block-table {
	overflow-x: auto;
}

.entry-content :is(p, li, td, dd) {
	overflow-wrap: break-word;
}

/*
 * "Count up" style (assets/js/count-up.js). The script fixes the
 * number's width at its final size so the words after it don't shuffle
 * along; that needs inline-block. Tabular figures keep every digit the
 * same width while it counts.
 */
.is-style-count-up .count-up__number {
	display: inline-block;
	font-variant-numeric: tabular-nums;
}

/* The savings calculator's big total counts too, so it gets the same even digits. */
.savings-total strong {
	font-variant-numeric: tabular-nums;
}

/* ---------- Timeline (patterns/timeline.php) ---------- */

/*
 * A vertical timeline: a calendar marker on the left of each entry, a
 * card on the right, and a line joining the markers. assets/js/timeline.js
 * sets where the line starts, how long it is and how much is filled
 * (--timeline-start, --timeline-length, --timeline-fill). Without the
 * script the line runs the full height and isn't filled.
 */
.timeline {
	--marker: 64px;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	position: relative;
}

.timeline > .timeline__item {
	margin-block-start: 0;
}

/* The grey line, then the mint fill on top of it. */
.timeline::before,
.timeline::after {
	content: "";
	left: calc(var(--marker) / 2 - 1px);
	position: absolute;
	top: var(--timeline-start, calc(var(--marker) / 2));
	width: 2px;
}

.timeline::before {
	background-color: var(--wp--preset--color--grey);
	height: var(--timeline-length, calc(100% - var(--marker)));
}

.timeline::after {
	background: linear-gradient(var(--wp--preset--color--mint), var(--wp--preset--color--mint-dark));
	height: var(--timeline-fill, 0px);
}

.timeline__item {
	gap: 32px !important;
	position: relative;
	z-index: 1;
}

/* Calendar marker. Lights up mint once the line reaches it. */
.timeline__marker {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 1px 2px rgba(39, 47, 79, 0.06), 0 6px 16px rgba(39, 47, 79, 0.08);
	color: var(--wp--preset--color--navy);
	flex: 0 0 var(--marker);
	height: var(--marker);
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.timeline__marker .wp-block-icon svg {
	fill: currentColor;
	height: 28px;
	width: 28px;
}

.timeline__item.is-active .timeline__marker {
	background-color: var(--wp--preset--color--mint);
	transform: scale(1.05);
}

/* The card. */
.timeline__card {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 1px 2px rgba(39, 47, 79, 0.06), 0 8px 24px rgba(39, 47, 79, 0.06);
	flex: 1 1 auto;
	min-width: 0;
	padding: 32px 36px;
	transition: box-shadow 0.3s ease;
}

/*
 * Highlight the entry being read (is-current, set by the script): a mint
 * outline, a deeper shadow and a small lift. Once one entry is current,
 * the others fade back a little so it stands out.
 */
.timeline__card {
	transition: box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.timeline.has-current .timeline__item:not(.is-current) .timeline__card {
	opacity: 0.55;
}

.timeline__item.is-current .timeline__card {
	box-shadow: 0 0 0 2px var(--wp--preset--color--mint), 0 14px 32px rgba(39, 47, 79, 0.12);
	transform: translateX(4px);
}

.timeline__card > * + * {
	margin-block-start: 12px;
}

/* Date: small monospace caps in dark mint, in place of "Step 01". */
.timeline__date {
	color: var(--wp--preset--color--mint-dark);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.timeline__title {
	margin-block-start: 8px !important;
}

/* Optional note: a short quote-style line under the text. */
.timeline__note {
	border-left: 2px solid var(--wp--preset--color--mint);
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: 20px !important;
	padding-left: 14px;
}

/* Entries fade and slide up into place as they scroll into view. */
.timeline.is-animated .timeline__item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline.is-animated .timeline__item.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.timeline.is-animated .timeline__item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.timeline__marker {
		transition: none;
	}

	.timeline__item.is-active .timeline__marker,
	.timeline__item.is-current .timeline__card {
		transform: none;
	}
}

/* Phones: smaller markers and tighter cards. */
@media (max-width: 599px) {
	.timeline {
		--marker: 48px;
	}

	.timeline__item {
		gap: 16px !important;
	}

	.timeline__card {
		padding: 20px;
	}

	.timeline__marker .wp-block-icon svg {
		height: 22px;
		width: 22px;
	}
}

/* ---------- Team (patterns/team.php) ---------- */

/*
 * Heading and intro on the left, an optional button on the right, then a
 * thin line above the people.
 */
.team-header__intro {
	max-width: 520px;
}

.team-header__intro > p {
	color: var(--wp--preset--color--grey-dark);
}

.team-divider.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--grey);
	opacity: 1;
}

/*
 * "Team member" style for the Media & Text block: a portrait photo on the
 * left, then name, role, bio and social icons. The People group is a
 * grid, so people sit two to a row on wide screens and stack below that.
 * On phones the photo stacks above the text.
 */
.is-style-team-member .wp-block-media-text__media {
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
}

/* Portrait crop, whatever shape the uploaded photo is. */
.is-style-team-member .wp-block-media-text__media img {
	aspect-ratio: 3 / 4;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* Space between photo and text, in place of core's 8% padding. */
.is-style-team-member .wp-block-media-text__content {
	padding: 0 0 0 32px;
}

@media (max-width: 600px) {
	.is-style-team-member.is-stacked-on-mobile .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40) 0 0;
	}

	/* Stacked, a full-width portrait would be very tall, so cap it. */
	.is-style-team-member.is-stacked-on-mobile .wp-block-media-text__media img {
		aspect-ratio: 1;
	}
}

.is-style-team-member .wp-block-media-text__content > * + * {
	margin-block-start: 14px;
}

.team-member__name {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

/* Role: small caps in dark mint, like the timeline dates. */
.is-style-team-member .wp-block-media-text__content > .team-member__role {
	color: var(--wp--preset--color--mint-dark);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	margin-block-start: 8px;
	text-transform: uppercase;
}

.is-style-team-member .wp-block-media-text__content > p:not(.team-member__role) {
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Social icons: navy circles with white icons, turning mint on hover.
 * Add GitHub, X etc. with the block's + button. The long selector beats
 * core's per-network brand colours.
 */
.is-style-team-member .wp-block-social-links.team-member__social {
	gap: 8px;
	margin-block-start: var(--wp--preset--spacing--40);
}

.is-style-team-member .wp-block-social-links.team-member__social .wp-social-link {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.is-style-team-member .wp-block-social-links.team-member__social .wp-social-link:hover {
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--navy);
	transform: none;
}