/*!
Theme Name: launchpad
Theme URI: http://underscores.me/
Author: WebMO
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: launchpad
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

launchpad is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

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

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ul,
li>ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--accent-link);
}

/* No :visited rule on purpose: visited links keep whatever colour their
own rules give them. An author colour on `a` outranks the browser's
visited purple. */

a:hover,
a:focus,
a:active {
	color: var(--accent-strong);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Begin Launchpad Styles
--------------------------------------------------------------*/
/* Controls block width in the block editor */
html :where(.wp-block) {
	max-width: var(--content-max-width);
}

/* Constrains non-custom-block content in the block editor */
.entry-content > *:not(.lp-block){
	max-width: var(--content-max-width);
	margin-inline: auto;
}

/* Consecutive blocks without a background: the second drops its top
padding, so the gap between them is one block's bottom padding instead of
two paddings stacked. Front end only, the editor wraps each block so the
sibling never matches there. */
.lp-block--no-bg + .lp-block--no-bg {
	padding-block-start: 0;
}

/* CSS Tokens
--------------------------------------------- */
:root {

	/* 1. PRIMITIVES
	   The only colours that exist. Four step ramps, 100 lightest to 400
	   darkest, plus white. Per site values come from the designer's Figma
	   export via tools/tokens-to-css.py and land in the child theme's
	   brand-identity.css. The defaults below express the current Launchpad
	   look; ramp steps with no historical value are derived and are
	   placeholder quality until a real export overrides them. */
	--white: #FFFFFF;

	--neutral-100: color-mix(in srgb, #b6bfcc 30%, white);
	--neutral-200: #b6bfcc;
	--neutral-300: #6B717E;
	--neutral-400: #242527;

	--primary-100: color-mix(in srgb, #2F5387 20%, white);
	--primary-200: color-mix(in srgb, #2F5387 55%, white);
	--primary-300: #2F5387;
	--primary-400: color-mix(in srgb, #2F5387 80%, black);

	/* No second grey exists in the default palette, so secondary mirrors
	   neutral until an export provides its own ramp. */
	--secondary-100: var(--neutral-100);
	--secondary-200: var(--neutral-200);
	--secondary-300: var(--neutral-300);
	--secondary-400: var(--neutral-400);

	--accent-100: color-mix(in srgb, #615FF8 30%, white);
	--accent-200: color-mix(in srgb, #615FF8 58%, white);
	--accent-300: #615FF8;
	--accent-400: color-mix(in srgb, #615FF8 80%, black);

	/* 2. SEMANTICS, LIGHT
	   The only tokens components consume. Light mode lives here, dark mode
	   is the .is-dark re-declaration after this rule; a block carrying
	   .is-dark resolves every semantic to its dark value for everything
	   inside it. Pointers are per site data, a Figma export overrides them
	   wholesale. */

	/* Surface */
	--surface-page: var(--white);
	--surface-card: var(--white);
	--surface-subtle: var(--neutral-100);
	--surface-overlay: var(--neutral-100);

	/* Text */
	--text-primary: var(--neutral-400);
	--text-secondary: var(--neutral-300);
	--text-disabled: var(--neutral-200);
	--text-on-brand: var(--white);
	--text-accent: var(--accent-300);

	/* Brand */
	--brand-tint: var(--primary-100);
	--brand-subtle: var(--primary-200);
	--brand-default: var(--primary-300);
	--brand-strong: var(--primary-400);

	/* CTA. Deliberately identical in both modes for now, buttons do not
	   restyle on dark sections in the current design. */
	--cta-tint: var(--accent-100);
	--cta-default: var(--accent-300);
	--cta-hover: color-mix(in srgb, var(--accent-300) 80%, white);
	--cta-text: var(--text-on-brand);

	/* Accent */
	--accent-tint: var(--accent-100);
	--accent-default: var(--accent-300);
	--accent-strong: var(--accent-400);
	--accent-link: var(--accent-300);
	--accent-badge-bg: var(--accent-100);
	--accent-badge-text: var(--accent-400);

	/* Border */
	--border-default: var(--neutral-200);
	--border-strong: var(--neutral-300);
	--border-brand: var(--primary-300);
	--border-focus: var(--accent-300);

	/* 3. COMPONENT TOKENS */
	--color-heading: var(--primary-300); /* deliberate extension of the
	   taxonomy, see CLAUDE.md Potential additions */

	/* Font Family */
	--font-family-heading: "Roboto", "Helvetica", sans-serif;
	--font-family-body: "Lato", "Helvetica", sans-serif;
	--font-family-button: "Roboto", "Helvetica", sans-serif;

	/* Font Size
	   Fluid. Each maximum equals the previous fixed value, so desktop is
	   unchanged and only narrower viewports differ. */
	--font-size-h1: clamp(36px, 5vw, 60px);
	--font-size-h2: clamp(30px, 4vw, 48px);
	--font-size-h3: clamp(25px, 3.17vw, 38px);
	--font-size-h4: clamp(22px, 2.5vw, 30px);
	--font-size-h5: clamp(20px, 2.17vw, 26px);
	--font-size-h6: var(--font-size-h5);

	--font-size-body: 18px;
	--font-size-small: 16px;

	/* Line Height
	   Always unitless so it scales with a clamped font size. */
	--line-height-heading: normal;
	--line-height-body: 1.5;

	/* Bleed media stops growing at this half-viewport width, the section
	   background fills beyond it. 960px = flush to the edge up to a 1920px
	   viewport, capped past it. */
	--bleed-media-max-width: 960px;

	/* Tint overlay. Composed with relative colour syntax so one hex and one
	   number reproduce the historical gradient exactly, 0.9 alpha fading to
	   0.7. Per block author values arrive as inline custom properties on the
	   tint div, emitted only when the fields are set. --tint-blend stays CSS
	   only for now, set it to multiply per site for the richer look. */
	--tint-color: #040C24;
	--tint-opacity: 0.9;
	--tint-blend: normal;

	/* Gallery marquee speed, pixels per second. */
	--marquee-speed: 60;

	/* Divider strip heights. Clamped so dividers thin out on phones;
	   custom per block heights arrive as an inline --divider-height. */
	--divider-height-s: clamp(24px, 4vw, 48px);
	--divider-height-m: clamp(40px, 6vw, 80px);
	--divider-height-l: clamp(64px, 9vw, 120px);

	/* Buttons, aliases onto the CTA semantics */
	--btn-radius: 8px;
	--btn-padding-y: 10px;
	--btn-padding-x: 14px;
	--btn-bg: var(--cta-default);
	--btn-text: var(--cta-text);
	--btn-bg-hover: var(--cta-hover);
	--btn-text-hover: var(--cta-text);


	/* Sizing */
	--content-max-width: 1200px;
	--content-width-narrow: 640px;
	--content-width-normal: 1100px;
	--content-width-wide: 1140px;

	--side-margin: 20px;

	--max-width-narrow: calc((2 * var(--side-margin)) + var(--content-width-narrow));
	--max-width-normal: calc((2 * var(--side-margin)) + var(--content-width-normal));
	--max-width-wide: calc((2 * var(--side-margin)) + var(--content-width-wide));

	--margin-vertical-normal: 50px;
	--margin-vertical-wide: 70px;
	--margin-vertical-wider: 90px;

}

/* Tint overlay, shared by every block that offers a tint. Values come from
the tokens above, overridable per block via inline custom properties. */
.lp-tint {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	mix-blend-mode: var(--tint-blend);
	background: linear-gradient(
		180deg,
		rgb(from var(--tint-color) r g b / var(--tint-opacity)) 0%,
		rgb(from var(--tint-color) r g b / calc(var(--tint-opacity) - 0.2)) 100%
	);
}

/* Dark context. A block whose template computes a dark background adds
.is-dark alongside its --has-bg modifier, and every semantic inside it
resolves to the values below. Custom properties inherit, so one class on the
section covers all descendants. */
.is-dark {

	/* Surface */
	--surface-page: var(--neutral-400);
	--surface-card: #3F4658; /* off system placeholder, see CLAUDE.md Known noise */
	--surface-subtle: var(--neutral-300);
	--surface-overlay: var(--neutral-300);

	/* Text */
	--text-primary: var(--white);
	--text-secondary: var(--neutral-200);
	--text-disabled: var(--neutral-300);
	--text-on-brand: var(--white);
	--text-accent: var(--accent-200);

	/* Brand */
	--brand-tint: var(--primary-400);
	--brand-subtle: var(--primary-400);
	--brand-default: var(--primary-300);
	--brand-strong: var(--primary-200);

	/* Accent */
	--accent-tint: var(--accent-400);
	--accent-default: var(--accent-200);
	--accent-strong: var(--accent-100);
	--accent-link: var(--accent-200);
	--accent-badge-bg: var(--accent-400);
	--accent-badge-text: var(--accent-200);

	/* Border */
	--border-default: var(--neutral-300);
	--border-strong: var(--neutral-200);
	--border-brand: var(--primary-300);
	--border-focus: var(--accent-200);
}

/* TODO: Adjust header font sizes for medium sized screens
Currently headers are too large for tablet devices in dual column layouts.
*/

/* Body carries the type tokens so text outside a p, nav links and list
items included, inherits them instead of the Underscores scaffold stack. */
body {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
}

h1 {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h1);
	font-style: normal;
	font-weight: 700;
	line-height: var(--line-height-heading);
	color: var(--color-heading);
	margin: 0;
}

h2 {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h2);
	font-style: normal;
	font-weight: 400;
	line-height: var(--line-height-heading);
	color: var(--color-heading);
	margin: 0;
}

h3 {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h3);
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-heading);
	margin: 0;
}

h4 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-h4);
	font-style: normal;
	font-weight: 600;
	line-height: var(--line-height-heading);
	color: var(--color-heading);
}

h5 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-h5);
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	color: var(--neutral-400);
}

p {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
}

a {
	text-decoration: none;
}

/* TODO: Create button system that allows leading icon and two buttons in one container */

a.btn {
	display: inline-block;
	align-self: flex-start;
	border-radius: var(--btn-radius);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	font-size: var(--font-size-body);
}

a.btn-primary {
	background-color: var(--btn-bg);
	color: var(--btn-text);
}

a.btn-primary:hover {
	background-color: var(--btn-bg-hover);
	color: var(--btn-text-hover);
	transition: 0.25s;
}

/* Global form styles */

.gform_wrapper .gform_heading .gform_description:empty{
	display: none;
}

.gform_wrapper .gform_heading .gform_required_legend{
	display: none;
}

.gform_wrapper .gform_heading .gform_title{
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h1);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0;
}

.gform_wrapper .gform_body .gform_fields .gfield input,
.gform_wrapper .gform_body .gform_fields .gfield textarea,
.gform_wrapper .gform_body .gform_fields .gfield select {
	border-radius: 8px;
	border: solid 1px var(--border-default);
	padding: 10px 14px;
	/* Form controls do not inherit from body, they carry the Underscores
	scaffold stack unless set here. */
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
}

.gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
}

.gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gform-field-label--type-sub {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
}

.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button[type=submit] {
	/* gravity_form() renders the submit as <button>, the shortcode rendered
	<input>. Both covered so the markup path cannot unstyle it. Colours ride
	the CTA tokens like a.btn does. */
	border-radius: var(--btn-radius);
	border: none;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	background-color: var(--btn-bg) !important;
	color: var(--btn-text);
	cursor: pointer;

	font-family: var(--font-family-body);
	font-size: var(--font-size-body) !important;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
}

/* Editor only empty states. All of this markup is emitted only during
block preview, so these rules are inert on the front end. */
.lp-editor-placeholder {
	display: block;
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
	margin-block: 12px;
}

/* Placeholder image tile, sized like the media it stands in for. */
.lp-editor-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	width: 100%;
	border: 1px solid var(--border-default);
	border-radius: 12px;
	background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
	color: var(--text-secondary);
	cursor: pointer;
}

.lp-editor-media-placeholder {
	gap: 20px;
}

.lp-editor-media-placeholder.lp-two-column__bleed-embed {
	aspect-ratio: auto;
	/* Grid centring: immune to the flex quirks of the absolute bleed box. */
	display: grid;
	place-items: center;
}

/* Editor canvas: nudge the bleed tile's icon toward the visible area. */
.lp-editor-media-placeholder.lp-two-column__bleed-embed svg {
	position: relative;
	right: 300%;
}

.lp-editor-media-placeholder svg {
	width: 48px;
	height: 48px;
	fill: currentColor;
}

/* Breathing room between inline editable text elements in the canvas; the
attribute only exists in the editor. */
[data-acf-inline-contenteditable] {
	margin-block-end: 12px;
}

/* 404 template. Decorative giant code, aria-hidden in the markup since the
heading and body carry the information. Token only, so it restyles itself
per client brand. */
.lp-error-404 {
	display: flex;
	position: relative;
	overflow: hidden;
	min-height: 70vh;
	padding-block: var(--margin-vertical-wider);
	padding-inline: 4vw;
}

/* Soft brand glow behind the content. */
.lp-error-404::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(70vw, 900px);
	aspect-ratio: 1;
	transform: translate(-50%, -55%);
	background: radial-gradient(circle, var(--brand-tint) 0%, transparent 65%);
	opacity: 0.5;
	pointer-events: none;
}

.lp-error-404 .block-contents {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	position: relative;
	width: 100%;
	max-width: var(--content-width-narrow);
	margin-inline: auto;
}

.lp-error-404__code {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: clamp(110px, 24vw, 240px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--brand-default);
	user-select: none;
}

.lp-error-404__digit {
	display: inline-block;
}

/* The zero is hollow and gently adrift. text-stroke draws the outline;
the solid colour stays underneath as the fallback where the prefixed
property is unsupported. */
.lp-error-404__digit--zero {
	-webkit-text-stroke: 3px var(--brand-default);
	-webkit-text-fill-color: transparent;
	margin-inline: 0.02em;
	animation: lp-404-drift 5s ease-in-out infinite alternate;
}

@keyframes lp-404-drift {
	from {
		transform: translateY(-4%) rotate(-3deg);
	}

	to {
		transform: translateY(4%) rotate(3deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-error-404__digit--zero {
		animation: none;
	}
}

.lp-error-404__header {
	color: var(--text-primary);
	margin-block-start: 12px;
}

.lp-error-404__body {
	margin-block: 0 12px;
	color: var(--text-secondary);
}

/* The global a.btn self-aligns flex-start; this column centres. */
.lp-error-404 .btn {
	align-self: center;
}

/* Real search, submits to WP's ?s=. */
.lp-inline-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(100%, 420px);
	border: 1px solid var(--border-default);
	border-radius: 8px;
	padding: 10px 14px;
	background-color: var(--surface-card);
	color: var(--text-secondary);
}

.lp-inline-search:focus-within {
	border-color: var(--border-focus);
}

.lp-inline-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0;
	background: none;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	color: var(--text-primary);
	outline: none;
}

.lp-inline-search button {
	display: inline-flex;
	border: 0;
	padding: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.lp-inline-search button:hover {
	color: var(--accent-link);
}

/* Blog archive (home.php, archive.php)
--------------------------------------------- */
.lp-blog {
	padding-block: var(--margin-vertical-wide) var(--margin-vertical-wider);
	padding-inline: 4vw;
}

.lp-blog__inner {
	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
}

.lp-blog__title {
	margin: 0;
}

.lp-blog__description {
	color: var(--text-secondary);
	max-width: var(--content-width-narrow);
}

/* Filter bar: category tabs plus search toggle. */
.lp-blog__filter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block: 28px 36px;
	flex-wrap: wrap;
}

.lp-blog__tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.lp-blog__tab {
	font-family: var(--font-family-heading);
	font-weight: 600;
	font-size: var(--font-size-small);
	color: var(--text-secondary);
	border: 1px solid var(--border-default);
	border-radius: 99px;
	padding: 8px 18px;
}

.lp-blog__tab:hover {
	border-color: var(--border-strong);
	color: var(--text-primary);
}

.lp-blog__tab--active,
.lp-blog__tab--active:hover {
	background-color: var(--brand-default);
	border-color: var(--brand-default);
	color: var(--text-on-brand);
}

.lp-blog__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--border-default);
	border-radius: 50%;
	background: none;
	color: var(--text-secondary);
	cursor: pointer;
}

.lp-blog__search-toggle:hover {
	border-color: var(--border-strong);
	color: var(--text-primary);
}

/* Featured post, page one of the index only. */
.lp-blog__featured {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 36px;
	align-items: center;
	margin-block-end: 44px;
}

.lp-blog__featured-media {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.lp-blog__featured-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lp-blog__featured-title {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-heading);
	margin-block: 10px;
}

.lp-blog__featured-title a {
	color: var(--text-primary);
}

.lp-blog__featured-title a:hover {
	color: var(--accent-link);
}

.lp-blog__featured-excerpt {
	color: var(--text-secondary);
	margin-block: 0 10px;
}

.lp-blog__featured-cta {
	margin-block-start: 14px;
}

/* Card grid. */
.lp-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.lp-blog-card {
	background-color: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.lp-blog-card__media {
	display: block;
	aspect-ratio: 16 / 9;
}

.lp-blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Posts with no featured image get a brand gradient stand-in. */
.lp-blog-card__media-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--brand-default), var(--accent-default));
}

.lp-blog-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px;
}

.lp-blog-card__title {
	font-size: var(--font-size-h5);
	line-height: 1.3;
	margin: 0;
}

.lp-blog-card__title a {
	color: var(--text-primary);
}

.lp-blog-card__title a:hover {
	color: var(--accent-link);
}

.lp-blog__chip {
	font-family: var(--font-family-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-badge-text);
	background-color: var(--accent-badge-bg);
	border-radius: 99px;
	padding: 3px 10px;
}

.lp-blog__meta {
	font-size: var(--font-size-small);
	color: var(--text-secondary);
	margin: 0;
}

/* Search results (search.php), rows not cards since results mix posts
and pages. */
.lp-search-results__list {
	display: flex;
	flex-direction: column;
}

.lp-search-row {
	padding-block: 20px;
	border-bottom: 1px solid var(--border-default);
}

.lp-search-row:last-child {
	border-bottom: 0;
}

.lp-search-row__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.lp-search-row__title {
	font-size: var(--font-size-h5);
	margin: 0;
}

.lp-search-row__title a {
	color: var(--text-primary);
}

.lp-search-row__title a:hover {
	color: var(--accent-link);
}

.lp-search-row__type {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-disabled);
}

.lp-search-row__excerpt {
	color: var(--text-secondary);
	max-width: 70ch;
	margin: 6px 0 4px;
}

.lp-search-results__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.lp-search-results__empty-copy {
	color: var(--text-secondary);
	margin: 0;
	max-width: var(--content-width-narrow);
}

/* Pagination, WordPress .page-numbers markup. */
.lp-blog .navigation.pagination {
	margin-block-start: 40px;
}

.lp-blog .nav-links {
	display: flex;
	gap: 6px;
	justify-content: center;
}

.lp-blog .page-numbers {
	font-family: var(--font-family-heading);
	font-weight: 600;
	font-size: var(--font-size-small);
	min-width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	padding-inline: 8px;
	border-radius: 8px;
	border: 1px solid transparent;
	color: var(--text-secondary);
}

.lp-blog a.page-numbers:hover {
	border-color: var(--border-strong);
	color: var(--text-primary);
}

.lp-blog .page-numbers.current {
	background-color: var(--cta-default);
	color: var(--cta-text);
}

.lp-blog .page-numbers.prev,
.lp-blog .page-numbers.next {
	border-color: var(--border-default);
}

/* Search modal. Inert by design for now, see search-modal.php. */
.lp-search-modal {
	border: none;
	border-radius: 12px;
	padding: 0;
	width: min(92vw, 560px);
	background-color: var(--surface-card);
	color: var(--text-primary);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.lp-search-modal::backdrop {
	background: rgba(4, 12, 36, 0.55);
}

.lp-search-modal__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	position: relative;
}

.lp-search-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-secondary);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.lp-search-modal__label {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h5);
	font-weight: 700;
}

.lp-search-modal__field {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--border-default);
	border-radius: 8px;
	padding: 12px 14px;
	color: var(--text-secondary);
}

.lp-search-modal__field:focus-within {
	border-color: var(--border-focus);
}

.lp-search-modal__field input {
	flex: 1;
	border: 0;
	padding: 0;
	background: none;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	color: var(--text-primary);
	outline: none;
}

.lp-search-modal__hint {
	margin: 0;
	font-size: var(--font-size-small);
	color: var(--text-disabled);
}

/* Live results under the field. */
.lp-search-modal__results {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 320px;
	overflow-y: auto;
	border-top: 1px solid var(--border-default);
	padding-top: 10px;
}

.lp-search-modal__result {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--text-primary);
}

.lp-search-modal__result:hover,
.lp-search-modal__result:focus-visible {
	background-color: var(--surface-subtle);
}

.lp-search-modal__result-title {
	font-weight: 700;
}

.lp-search-modal__result-type {
	font-size: 12px;
	color: var(--text-disabled);
	text-transform: capitalize;
	flex: none;
}

.lp-search-modal__state {
	margin: 0;
	padding: 4px 0;
	font-size: var(--font-size-small);
	color: var(--text-secondary);
}

@media screen and (max-width: 1000px) {
	.lp-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lp-blog__featured {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media screen and (max-width: 640px) {
	.lp-blog__grid {
		grid-template-columns: 1fr;
	}

	.lp-blog__search-toggle {
		margin-left: 0;
	}
}

/* Single post (single.php)
--------------------------------------------- */
/* Lives inside the sticky .site-header (see header.php, single posts
only), riding its bottom edge, so it stays visible exactly as long as
the header does. A future fade-on-scroll header fades its nav content
and leaves the bar in place. */
.lp-post-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	pointer-events: none;
	background-color: var(--neutral-100);
}

.lp-post-progress__fill {
	display: block;
	height: 100%;
	background-color: var(--accent-default);
	transform: scaleX(0);
	transform-origin: left;
}

.lp-post {
	padding-block: var(--margin-vertical-wide) var(--margin-vertical-wider);
	padding-inline: 4vw;
}

.lp-post__layout {
	max-width: var(--content-width-narrow);
	margin-inline: auto;
}

/* With the TOC on, the rail takes a left track and the reading column
keeps its width in the right one. */
.lp-post--has-toc .lp-post__layout {
	display: grid;
	grid-template-columns: 200px minmax(0, var(--content-width-narrow));
	gap: 56px;
	justify-content: center;
	max-width: var(--content-max-width);
	align-items: start;
}

.lp-post__date {
	margin: 0 0 6px;
	font-size: var(--font-size-small);
	color: var(--text-secondary);
}

.lp-post__title {
	font-size: var(--font-size-h2);
	margin: 0 0 28px;
}

.lp-post__content > *:first-child {
	margin-block-start: 0;
}

/* Anchored sections land below the sticky header when jumped or
smooth-scrolled to, instead of hiding behind it. */
.lp-post__content > [id] {
	scroll-margin-top: 130px;
}

/* Sticky rail. */
.lp-post__rail {
	position: sticky;
	top: 90px;
	border-right: 1px solid var(--border-default);
	padding-right: 20px;
}

.lp-post__rail-title {
	font-family: var(--font-family-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 10px;
}

.lp-post__toc {
	display: flex;
	flex-direction: column;
}

.lp-post__toc-link {
	color: var(--text-secondary);
	font-size: var(--font-size-small);
	padding: 5px 0;
	border-left: 2px solid transparent;
}

.lp-post__toc-link:hover {
	color: var(--text-primary);
}

.lp-post__toc-link--active {
	color: var(--accent-link);
	font-weight: 700;
	border-left-color: var(--accent-default);
	padding-left: 8px;
	margin-left: -10px;
}

/* The section a highlighted sub-section belongs to keeps its colour,
without the active border, so the chapter context stays visible. */
.lp-post__toc-link--in-section {
	color: var(--accent-link);
}

/* Sub-sections indent under their section, book style. */
.lp-post__toc-link--sub {
	padding-left: 16px;
}

.lp-post__toc-link--sub.lp-post__toc-link--active {
	padding-left: 24px;
	margin-left: -10px;
}

/* Mobile: rail off, floating button on. */
.lp-post__toc-toggle {
	display: none;
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background-color: var(--cta-default);
	color: var(--cta-text);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.lp-toc-modal {
	border: none;
	border-radius: 12px;
	padding: 0;
	width: min(92vw, 420px);
	background-color: var(--surface-card);
	color: var(--text-primary);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.lp-toc-modal::backdrop {
	background: rgba(4, 12, 36, 0.55);
}

.lp-toc-modal__inner {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	position: relative;
}

.lp-toc-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-secondary);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.lp-toc-modal .lp-post__toc-link {
	font-size: var(--font-size-body);
	padding: 8px 0;
}

/* Previous / next cards. Inside the reading column, so they align with
the content whatever side the rail is on, or with no rail at all. */
.lp-post__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-block-start: 48px;
}

.lp-post__nav-card {
	display: block;
	border: 1px solid var(--border-default);
	border-radius: 10px;
	padding: 16px;
}

.lp-post__nav-card:hover {
	border-color: var(--border-strong);
}

.lp-post__nav-card--next {
	grid-column: 2;
	text-align: right;
}

/* A missing neighbour still renders its card, greyed out, so the pair
always reads as a set. */
.lp-post__nav-card--disabled {
	pointer-events: none;
	opacity: 0.55;
}

.lp-post__nav-card--disabled .lp-post__nav-dir {
	color: var(--text-disabled);
}

.lp-post__nav-card--disabled .lp-post__nav-title {
	color: var(--text-secondary);
	font-weight: 400;
}

.lp-post__nav-dir {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-link);
}

.lp-post__nav-title {
	display: block;
	font-family: var(--font-family-heading);
	font-weight: 700;
	color: var(--text-primary);
	margin-top: 4px;
}

@media screen and (max-width: 900px) {
	.lp-post--has-toc .lp-post__layout {
		display: block;
		max-width: var(--content-width-narrow);
	}

	.lp-post__rail {
		display: none;
	}

	.lp-post__toc-toggle {
		display: inline-flex;
	}

	.lp-post__nav {
		grid-template-columns: 1fr;
	}

	.lp-post__nav-card--next {
		grid-column: auto;
		text-align: left;
	}
}

/* Floating CTA, rendered on wp_footer when a page opts in. Pinned to the
right edge about a third of the way down the viewport. */
.lp-floating-buttons {
	position: fixed;
	right: 24px;
	top: 30vh;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.lp-floating-buttons__cta--has-icon {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lp-floating-buttons__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.lp-floating-buttons__cta-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The label collapses away leaving the icon, JS drives is-collapsed. */
.lp-floating-buttons__cta--has-icon .lp-floating-buttons__cta-label {
	max-width: 240px;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.3s ease, opacity 0.3s ease;
}

.lp-floating-buttons__cta--has-icon.is-collapsed .lp-floating-buttons__cta-label {
	max-width: 0;
	opacity: 0;
}

.lp-floating-buttons__top {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background-color: var(--btn-bg);
	color: var(--btn-text);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	cursor: pointer;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
}

.lp-floating-buttons__top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.lp-floating-buttons__top svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Gravity Forms character counter. Sits outside the input despite living
in ginput_container, so it follows the surrounding text colour and drops
the description spacing it inherits. */
.gform_wrapper .ginput_container .ginput_counter,
.gform_wrapper.gravity-theme .ginput_container .ginput_counter {
	margin-top: 0;
	padding-top: 0;
	color: var(--text-secondary);
}

/* Page titles stay hidden, blocks carry their own headings. Header and
footer styles live in components/. */
.entry-title{
	display: none;
}