/*
Theme Name: TMA Performance
Theme URI: https://tmaperformance.com
Author: DecisionWise
Author URI: https://decisionwise.com
Description: Block theme for the TMA Performance marketing site. Dark, high-contrast, brand-colour-forward. Tokens are defined in theme.json and follow BRAND.md v2; this stylesheet carries only the component layer that theme.json cannot express.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.2
Version: 0.5.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tma-performance
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-menu, editor-style
*/

/* ==========================================================================
   1. Base
   Everything colour-, type- and spacing-related lives in theme.json. Only add
   here what the block supports cannot reach.
   ========================================================================== */

:root {
	--tma-focus: var( --wp--preset--color--blue-700 );
	--tma-hairline: 1px solid var( --wp--preset--color--neutral-200 );
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Header, main and footer sit flush. Core gives every top-level child of
   .wp-site-blocks a margin-block-start of the root blockGap, which put a 20px
   white band under the sticky header and above the footer. The root blockGap
   is for content inside a section; vertical rhythm between sections is owned
   by each section's own padding. (Core's rule is inside :where(), so a single
   class takes it back.) */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* The design ships no focus states. These are required, not optional: the
   whole mega nav is keyboard-operable. --tma-focus flips to Lime on dark
   grounds (see the section styles further down). */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --tma-focus );
	outline-offset: 2px;
	border-radius: 3px;
}

/* Photography and screenshots: 10px radius, no shadow, ever. */
:where( .wp-block-image, .wp-block-post-featured-image ) img {
	border-radius: var( --wp--custom--radius--image );
}

.wp-block-image.is-style-rounded img,
.wp-block-image.is-style-tma-avatar img {
	border-radius: var( --wp--custom--radius--pill );
}

/* Long-form measure. 62ch is the design's framing-note width.
   The margin reset matters: core's constrained layout emits
   `.is-layout-constrained > :where(...) { max-width: …; margin-left: auto;
   margin-right: auto }`, so a narrowed block inside a constrained section gets
   centred instead of sitting on the left gutter. The :where() means zero
   specificity, so one class is enough to take it back. */
.tma-measure,
.tma-measure-tight {
	margin-inline: 0 auto;
}

.tma-measure {
	max-width: 62ch;
}

.tma-measure-tight {
	max-width: 52ch;
}

/* Centred sections still want their measure centred. */
.has-text-align-center.tma-measure,
.has-text-align-center.tma-measure-tight {
	margin-inline: auto;
}

/* ==========================================================================
   2. Sticky header
   Sticky has to sit on the template-part wrapper, not on a group inside it:
   a nested sticky element can only travel inside its parent's box, and the
   part wrapper is only as tall as the bar itself.
   ========================================================================== */

.tma-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba( 8, 18, 25, 0.97 );
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
	border-bottom: 1px solid var( --wp--preset--color--neutral-800 );
	--tma-focus: var( --wp--preset--color--lime-500 );
}

/* The bar itself: 1240px outer, 36px gutters, so the content lands on 1168 --
   the same measure as every section below it. */
.tma-header-row {
	max-width: 1240px;
	margin-inline: auto;
}

/* Core's flex layout support emits `.is-layout-flex > :is(*, div) { margin: 0 }`
   at specificity (0,1,1), which beats a bare `.tma-header-actions`. Every auto
   margin on a child of a flex Group has to be written as a descendant selector
   (0,2,0) or it silently does nothing. */
.tma-header-row > .tma-header-actions {
	margin-left: auto;
}

.tma-header-signin {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--neutral-400 );
	text-decoration: none;
	white-space: nowrap;
}

.tma-header-signin:hover {
	color: var( --wp--preset--color--neutral-000 );
	text-decoration: underline;
}

/* Below the nav breakpoint the CTA stays (it is the conversion action on every
   page); Sign in folds away on the narrowest screens to protect it. */
@media ( max-width: 480px ) {
	.tma-header-signin {
		display: none;
	}
}

/* Below the nav breakpoint the bar becomes: logo — burger — CTA. The nav takes
   the auto margin so the burger and the CTA sit together on the right, and the
   34px desktop gap comes right down: at 390px there are only 318px of usable
   width once the gutter is off, and a nowrap flex row will happily overflow
   the viewport rather than shrink. */
@media ( max-width: 1079px ) {
	.tma-header-row {
		gap: 12px !important;
	}

	.tma-header-row > .tma-header-actions {
		margin-left: 0;
		gap: 14px !important;
	}

	.tma-header-row > .tma-meganav {
		margin-left: auto;
	}
}

/* The gutter token is clamp(20px, 5vw, 36px) in theme.json, so the bar's
   padding comes down on its own. What still needs shrinking here is the
   chrome that has a fixed cost. */
@media ( max-width: 600px ) {
	/* Icon-only burger: the label is still there for assistive tech. */
	.tma-meganav__burger-label {
		border: 0;
		clip-path: inset( 50% );
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.tma-meganav__burger {
		padding: 9px 12px;
	}

	.tma-buttons-lg .wp-block-button__link,
	.tma-site-header .wp-block-button__link {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ==========================================================================
   3. The six-colour rule bar
   One element, one gradient with hard stops -- no six child divs to keep in
   order. Header/hero order is Blue, Pink, Lime, Green, Yellow, Orange; the
   footer opens with Pink and Blue swapped, per the design.
   ========================================================================== */

.wp-block-separator.tma-rule-bar,
.tma-rule-bar {
	height: 6px;
	/* margin-block only. A blanket `margin: 0` here has the same specificity as
	   core's `.has-global-padding > .alignfull { margin-left: calc(... * -1) }`
	   and loads later, so it silently cancels the full-bleed and the bar stops
	   36px short of each edge. */
	margin-block: 0;
	border: 0;
	opacity: 1;
	background: var( --wp--custom--rule--bar );
}

.wp-block-separator.tma-rule-bar--footer,
.tma-rule-bar--footer {
	height: 5px;
	background: var( --wp--custom--rule--bar-footer );
}

/* ==========================================================================
   4. Cards and surfaces
   ========================================================================== */

.wp-block-group.is-style-tma-card {
	background-color: var( --wp--preset--color--neutral-000 );
	border: var( --tma-hairline );
	border-radius: var( --wp--custom--radius--card );
	padding: 34px 36px;
}

.wp-block-group.is-style-tma-card-flush {
	border-radius: var( --wp--custom--radius--card );
	padding: 34px 36px;
}

/* A 4-5px top border in a brand colour is the standard way to categorise a
   card. Set via Advanced > Additional CSS class, or hard-coded in patterns. */
.tma-accent-blue { border-top: 5px solid var( --wp--preset--color--blue-500 ) !important; }
.tma-accent-pink { border-top: 5px solid var( --wp--preset--color--pink-500 ) !important; }
.tma-accent-green { border-top: 5px solid var( --wp--preset--color--green-500 ) !important; }
.tma-accent-yellow { border-top: 5px solid var( --wp--preset--color--yellow-500 ) !important; }
.tma-accent-orange { border-top: 5px solid var( --wp--preset--color--orange-500 ) !important; }
.tma-accent-lime { border-top: 5px solid var( --wp--preset--color--lime-500 ) !important; }

/* Thinner variant used on the engagement cycle cards. */
.tma-accent-thin { border-top-width: 4px !important; }

/* A 3px left border, used on the "where teams use it" list. */
.tma-edge-lime { border-left: 3px solid var( --wp--preset--color--lime-500 ); padding-left: 20px; }
.tma-edge-green { border-left: 3px solid var( --wp--preset--color--green-500 ); padding-left: 20px; }
.tma-edge-yellow { border-left: 3px solid var( --wp--preset--color--yellow-500 ); padding-left: 20px; }
.tma-edge-orange { border-left: 3px solid var( --wp--preset--color--orange-500 ); padding-left: 20px; }

/* Screenshot / image frames on dark grounds. */
.tma-frame {
	border: 1px solid var( --wp--preset--color--neutral-800 );
	border-radius: var( --wp--custom--radius--image );
	overflow: hidden;
}

.tma-frame img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* ==========================================================================
   5. Type utilities
   The eyebrow is a real component: 11px / 700 / 0.12em / uppercase. It is not
   expressible as a font-size preset alone, and letterSpacing + textTransform
   are locked off in the editor on purpose.
   ========================================================================== */

.tma-eyebrow {
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0;
}

/* Poppins tracking tightens as it scales up. */
.tma-display,
h1 {
	letter-spacing: -0.028em;
}

.tma-numeral {
	font-family: var( --wp--preset--font-family--poppins );
	font-size: var( --wp--preset--font-size--numeral );
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.035em;
}

/* Tabular figures wherever numbers are compared down a column. */
.tma-tabular,
.wp-block-table td:not( :first-child ) {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. Buttons
   theme.json sets the primary (Blue 700) button. These are the variations,
   registered in functions.php so they appear in the block's Styles panel.
   ========================================================================== */

.wp-block-button.is-style-tma-lime > .wp-block-button__link {
	background-color: var( --wp--preset--color--lime-500 );
	color: var( --wp--preset--color--neutral-900 );
	border-radius: var( --wp--custom--radius--button );
	font-weight: 700;
}

.wp-block-button.is-style-tma-lime > .wp-block-button__link:hover,
.wp-block-button.is-style-tma-lime > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--lime-300 );
	color: var( --wp--preset--color--neutral-900 );
}

.wp-block-button.is-style-tma-yellow > .wp-block-button__link {
	background-color: var( --wp--preset--color--yellow-500 );
	color: var( --wp--preset--color--neutral-900 );
	border-radius: var( --wp--custom--radius--button );
	font-weight: 700;
}

.wp-block-button.is-style-tma-yellow > .wp-block-button__link:hover,
.wp-block-button.is-style-tma-yellow > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--yellow-300 );
	color: var( --wp--preset--color--neutral-900 );
}

/* White button with ink text -- for use on Pink 500 / Blue 500 CTA bands. */
.wp-block-button.is-style-tma-white > .wp-block-button__link {
	background-color: var( --wp--preset--color--neutral-000 );
	color: var( --wp--preset--color--neutral-900 );
	border-radius: var( --wp--custom--radius--button );
	font-weight: 700;
}

.wp-block-button.is-style-tma-white > .wp-block-button__link:hover,
.wp-block-button.is-style-tma-white > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--neutral-050 );
	color: var( --wp--preset--color--neutral-900 );
}

/* Ink button -- for use on light brand grounds (Lime CTA band). */
.wp-block-button.is-style-tma-ink > .wp-block-button__link {
	background-color: var( --wp--preset--color--neutral-900 );
	color: var( --wp--preset--color--neutral-000 );
	border-radius: var( --wp--custom--radius--button );
	font-weight: 700;
}

.wp-block-button.is-style-tma-ink > .wp-block-button__link:hover,
.wp-block-button.is-style-tma-ink > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--neutral-950 );
	color: var( --wp--preset--color--neutral-000 );
}

/* Secondary, on light. */
.wp-block-button.is-style-tma-secondary > .wp-block-button__link {
	background-color: var( --wp--preset--color--neutral-000 );
	color: var( --wp--preset--color--neutral-800 );
	border: 1px solid var( --wp--preset--color--neutral-300 );
	border-radius: var( --wp--custom--radius--button );
	font-weight: 600;
}

.wp-block-button.is-style-tma-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-tma-secondary > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--neutral-050 );
	border-color: var( --wp--preset--color--neutral-400 );
	color: var( --wp--preset--color--neutral-800 );
}

/* Outline, on dark. */
.wp-block-button.is-style-tma-outline-light > .wp-block-button__link {
	background-color: transparent;
	color: var( --wp--preset--color--neutral-000 );
	border: 1px solid var( --wp--preset--color--neutral-700 );
	border-radius: var( --wp--custom--radius--button );
	font-weight: 600;
}

.wp-block-button.is-style-tma-outline-light > .wp-block-button__link:hover,
.wp-block-button.is-style-tma-outline-light > .wp-block-button__link:focus {
	background-color: transparent;
	border-color: var( --wp--preset--color--neutral-000 );
	color: var( --wp--preset--color--neutral-000 );
}

/* Larger hit area for hero and CTA-band buttons. 44px minimum on mobile. */
.tma-buttons-lg .wp-block-button__link {
	font-size: var( --wp--preset--font-size--medium );
	padding: 15px 28px;
	border-radius: var( --wp--custom--radius--image );
}

.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   7. Status pills
   Pattern is 100 fill / 200 border / 900 text. Every combination passes AA.
   ========================================================================== */

.tma-pill {
	display: inline-block;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	line-height: 1.3;
	padding: 5px 13px;
	border-radius: var( --wp--custom--radius--pill );
	border: 1px solid transparent;
}

.tma-pill.is-on-track {
	background-color: var( --wp--preset--color--green-100 );
	border-color: var( --wp--preset--color--green-200 );
	color: var( --wp--preset--color--green-900 );
}

.tma-pill.is-attention {
	background-color: var( --wp--preset--color--yellow-100 );
	border-color: var( --wp--preset--color--yellow-200 );
	color: var( --wp--preset--color--yellow-900 );
}

.tma-pill.is-off-track {
	background-color: var( --wp--preset--color--orange-100 );
	border-color: var( --wp--preset--color--orange-200 );
	color: var( --wp--preset--color--orange-900 );
}

.tma-pill.is-not-started {
	background-color: var( --wp--preset--color--neutral-100 );
	border-color: var( --wp--preset--color--neutral-200 );
	color: var( --wp--preset--color--neutral-700 );
}

/* Lime "Most chosen" flag on the pricing card. */
.tma-flag {
	position: absolute;
	top: -13px;
	left: 34px;
	background-color: var( --wp--preset--color--lime-500 );
	color: var( --wp--preset--color--neutral-900 );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: var( --wp--custom--radius--pill );
}

.tma-flag-host {
	position: relative;
}

/* ==========================================================================
   8. Bullet lists with brand dots
   ========================================================================== */

.tma-dot-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.tma-dot-list li {
	position: relative;
	padding-left: 18px;
	line-height: 1.5;
}

.tma-dot-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: var( --wp--custom--radius--pill );
	background: var( --tma-dot, var( --wp--preset--color--lime-500 ) );
}

.tma-dot-lime { --tma-dot: var( --wp--preset--color--lime-500 ); }
.tma-dot-yellow { --tma-dot: var( --wp--preset--color--yellow-500 ); }
.tma-dot-blue { --tma-dot: var( --wp--preset--color--blue-500 ); }
.tma-dot-pink { --tma-dot: var( --wp--preset--color--pink-500 ); }

/* ==========================================================================
   8b. Blog
   The design covers no editorial pages, so these follow the established card
   language rather than inventing one: 10px image radius, Poppins titles,
   Neutral 700 body, Neutral 600 for dates.
   ========================================================================== */

.tma-post-grid > li,
.tma-post-grid > .wp-block-post {
	display: flex;
	flex-direction: column;
}

.tma-post-grid .wp-block-post-title {
	font-family: var( --wp--preset--font-family--poppins );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.tma-post-grid .wp-block-post-title a {
	text-decoration: none;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-post-grid .wp-block-post-title a:hover {
	color: var( --wp--preset--color--blue-700 );
	text-decoration: underline;
}

/* post-terms renders each term as a link, and a link with no colour of its own
   falls back to the global element style -- Blue 700. On the ink hero of a
   single post that is 2.61:1. Inheriting the block's own colour instead makes
   the eyebrow Lime on dark and Blue 700 on white, both of which pass, and it
   keeps working wherever else the block is dropped.
   Scoped to these two blocks rather than all links on a dark ground: a blanket
   rule would repaint the footer's Neutral 300 navigation too. */
.wp-block-post-terms a,
.wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-terms a:hover,
.wp-block-post-date a:hover {
	text-decoration: underline;
}

/* Push the date to the bottom so a row of cards lines up on it. */
.tma-post-grid .wp-block-post-date {
	margin-top: auto;
	padding-top: 12px;
}

.tma-post-grid .wp-block-post-featured-image img {
	border-radius: var( --wp--custom--radius--image );
}

/* --- Pagination and post navigation ------------------------------------- */

.tma-pagination,
.tma-post-nav {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
}

.tma-pagination a,
.tma-post-nav a {
	text-decoration: none;
	color: var( --wp--preset--color--blue-700 );
}

.tma-pagination a:hover,
.tma-post-nav a:hover {
	text-decoration: underline;
}

.tma-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 6px;
	align-items: center;
}

.tma-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 8px;
	border-radius: 8px;
	border: 1px solid var( --wp--preset--color--neutral-200 );
	color: var( --wp--preset--color--neutral-800 );
}

.tma-pagination .page-numbers:hover {
	border-color: var( --wp--preset--color--neutral-400 );
	background: var( --wp--preset--color--neutral-050 );
	text-decoration: none;
}

.tma-pagination .page-numbers.current {
	background: var( --wp--preset--color--neutral-950 );
	border-color: var( --wp--preset--color--neutral-950 );
	color: var( --wp--preset--color--neutral-000 );
}

/* The prev/next arrows sit on the ends of the number row rather than at the
   far edges of the content column. */
.tma-pagination .wp-block-query-pagination-previous,
.tma-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	border-radius: 8px;
	border: 1px solid var( --wp--preset--color--neutral-200 );
	color: var( --wp--preset--color--neutral-800 );
}

.tma-pagination .wp-block-query-pagination-previous:hover,
.tma-pagination .wp-block-query-pagination-next:hover {
	border-color: var( --wp--preset--color--neutral-400 );
	background: var( --wp--preset--color--neutral-050 );
	text-decoration: none;
}

/* An empty prev or next still has to hold its side of the row, or the single
   remaining link jumps across. */
.tma-post-nav .wp-block-post-navigation-link {
	max-width: 46%;
}

/* --- Load more ----------------------------------------------------------
   Replaces the pagination links when JavaScript is available; see
   assets/js/load-more.js. The real pagination stays in the DOM, hidden, and
   comes back if a fetch fails. */

/* `hidden` has to be given teeth here. Core lays the pagination out with
   .wp-block-query-pagination-is-layout-flex { display: flex }, an author rule
   that outranks the user-agent rule behind the hidden attribute -- so
   load-more.js setting pagination.hidden = true left the page links sitting
   there in full view. Two class/attribute selectors beat core's one, whatever
   order the stylesheets load in. */
.wp-block-query-pagination[hidden] {
	display: none;
}

.tma-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: var( --wp--preset--spacing--xxl );
}

.tma-load-more__button {
	appearance: none;
	font-family: var( --wp--preset--font-family--open-sans );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--neutral-900 );
	background: var( --wp--preset--color--neutral-000 );
	border: 1px solid var( --wp--preset--color--neutral-300 );
	border-radius: var( --wp--custom--radius--pill );
	padding: 13px 30px;
	min-height: 46px;
	cursor: pointer;
}

.tma-load-more__button:hover:not( :disabled ),
.tma-load-more__button:focus-visible {
	border-color: var( --wp--preset--color--neutral-950 );
	background: var( --wp--preset--color--neutral-950 );
	color: var( --wp--preset--color--neutral-000 );
}

.tma-load-more__button:disabled {
	opacity: 0.55;
	cursor: progress;
}

.tma-load-more__status {
	margin: 0;
	min-height: 1.4em;
	font-size: var( --wp--preset--font-size--caption );
	color: var( --wp--preset--color--neutral-700 );
}

/* The heading of a newly appended post takes focus so keyboard users land on
   the new content. That focus is programmatic, so it should not draw a ring
   the way a tabbed-to element would. */
.tma-post-grid [tabindex="-1"]:focus {
	outline: none;
}

/* --- Listing cards ------------------------------------------------------ */

/* The type label is the one place the design uses a green that has to sit on
   white. Lime 500 is 1.6:1 there and Lime 700 is 3.5:1 -- large-text only, and
   an eyebrow is not large text -- so this takes Lime 900 at 7.7:1 and keeps
   the brighter steps for dark grounds. */
.tma-card-type {
	color: var( --wp--preset--color--lime-900 );
}

.tma-on-dark .tma-card-type {
	color: var( --wp--preset--color--lime-500 );
}

/* Three lines, then an ellipsis -- so a long excerpt cannot shove one card's
   date out of line with its neighbours. */
.tma-card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.6;
}

.tma-card-excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

/* --- Section headings with a trailing link ------------------------------ */

.tma-section-head {
	border-bottom: 1px solid var( --wp--preset--color--neutral-200 );
	padding-bottom: var( --wp--preset--spacing--s );
}

.tma-section-link {
	margin: 0;
	font-weight: 600;
}

.tma-section-link a {
	text-decoration: none;
	color: var( --wp--preset--color--blue-700 );
}

.tma-section-link a:hover,
.tma-section-link a:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   8c. Listing hero
   ========================================================================== */

/* The headline is held short of the measure so the search box has somewhere to
   sit on a wide screen without the two colliding.

   No margin reset is needed, and none would work: core's constrained layout
   emits `margin-left: auto !important` on any child it constrains, which
   centres a narrowed heading, and overriding that just pushes the heading out
   to the padding edge instead of the content gutter. The templates solve it
   structurally -- the hero copy sits in a flow-layout group that is itself
   constrained, so its children start at the content column and a max-width
   here narrows them to the right rather than recentring them. */
.tma-listing-hero h1 {
	max-width: 18ch;
}

.tma-listing-lead {
	max-width: 56ch;
}

/* ==========================================================================
   8d. Single article
   ========================================================================== */

.tma-article-hero .tma-article-summary {
	max-width: 54ch;
}

.tma-article-labels {
	gap: 12px;
}

/* post-terms prints its terms as one run of links; as a pill it needs the
   ground, and as the area tag it needs only the colour. */
.tma-article-labels .tma-pill-type {
	display: inline-block;
	padding: 5px 13px;
	border-radius: var( --wp--custom--radius--pill );
	background: var( --wp--preset--color--lime-500 );
	color: var( --wp--preset--color--neutral-950 );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tma-article-labels .tma-article-area {
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	color: var( --wp--preset--color--neutral-300 );
}

.tma-article-hero .wp-block-post-featured-image img {
	border-radius: 14px;
}

/* A post with no featured image renders an empty second column, leaving the
   headline squeezed into 56% beside a void. When there is no image in the
   hero, the text column takes the full width. :has() is unsupported in old
   browsers, which simply keeps the current two-column split -- a cosmetic
   difference, not a broken layout. */
.tma-article-hero .wp-block-columns:not( :has( img ) ) {
	display: block;
}

.tma-article-hero .wp-block-columns:not( :has( img ) ) > .wp-block-column {
	flex-basis: auto !important;
}

.tma-article-hero .wp-block-columns:not( :has( img ) ) h1 {
	max-width: 24ch;
}

/* --- Body layout -------------------------------------------------------- */

/* A grid rather than a float or a flex row: the rail has to be able to stick
   for the full height of the article, which needs it to be a real column. */
.tma-article-layout {
	display: grid;
	grid-template-columns: 220px minmax( 0, 1fr );
	gap: var( --wp--preset--spacing--xxl );
	align-items: start;
}

.tma-article-layout > .tma-rail {
	position: sticky;
	top: calc( var( --wp--custom--nav--header-height, 58px ) + 24px );
}

.tma-article-main {
	min-width: 0;
}

/* The article column is already narrowed by the grid, so the constrained
   layout inside post-content must not narrow it a second time. */
.tma-article-main > .wp-block-post-content > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
	max-width: none;
}

@media ( max-width: 1023px ) {
	.tma-article-layout {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--l );
	}

	.tma-article-layout > .tma-rail {
		position: static;
		padding-bottom: var( --wp--preset--spacing--m );
		border-bottom: 1px solid var( --wp--preset--color--neutral-200 );
	}
}

/* --- Tag pills ---------------------------------------------------------- */

.tma-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: var( --wp--preset--font-size--caption );
}

/* post-terms puts a separator between terms. As a flex item that whitespace
   span becomes a third gap between every pair of pills, so it goes. */
.tma-article-tags .wp-block-post-terms__separator,
.tma-article-labels .wp-block-post-terms__separator {
	display: none;
}

.tma-article-tags a {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid var( --wp--preset--color--neutral-200 );
	border-radius: var( --wp--custom--radius--pill );
	background: var( --wp--preset--color--neutral-050 );
	color: var( --wp--preset--color--neutral-800 );
	font-weight: 600;
	text-decoration: none;
}

.tma-article-tags a:hover,
.tma-article-tags a:focus-visible {
	border-color: var( --wp--preset--color--neutral-950 );
	color: var( --wp--preset--color--neutral-950 );
}

/* --- In-article furniture ----------------------------------------------- */

/* Key takeaways: a tinted box an editor builds from a Group with this style,
   so the contents stay ordinary blocks. */
.wp-block-group.is-style-tma-takeaways {
	padding: 24px 28px;
	border-radius: var( --wp--custom--radius--card );
	background: var( --wp--preset--color--neutral-100 );
}

.wp-block-group.is-style-tma-takeaways > :first-child {
	margin-top: 0;
}

.wp-block-group.is-style-tma-takeaways > :last-child {
	margin-bottom: 0;
}

.wp-block-group.is-style-tma-takeaways li + li {
	margin-top: 8px;
}

/* Pull quote: the lime mark is generated, so the quotation is not duplicated
   into the accessibility tree as a stray character. */
.wp-block-quote.is-style-tma-pull {
	position: relative;
	margin-block: var( --wp--preset--spacing--l );
	padding: 4px 0 4px 56px;
	border: 0;
	font-family: var( --wp--preset--font-family--poppins );
	font-size: var( --wp--preset--font-size--heading-4 );
	font-style: normal;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--neutral-950 );
}

.wp-block-quote.is-style-tma-pull::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -6px;
	font-size: 72px;
	line-height: 1;
	color: var( --wp--preset--color--lime-500 );
}

.wp-block-quote.is-style-tma-pull cite {
	display: block;
	margin-top: 14px;
	font-family: var( --wp--preset--font-family--open-sans );
	font-size: var( --wp--preset--font-size--caption );
	font-style: normal;
	font-weight: 600;
	color: var( --wp--preset--color--neutral-600 );
}

@media ( max-width: 599px ) {
	.wp-block-quote.is-style-tma-pull {
		padding-left: 40px;
	}

	.wp-block-quote.is-style-tma-pull::before {
		font-size: 56px;
	}
}

/* Inline CTA card: a dark panel inside the article column. */
.wp-block-group.is-style-tma-inline-cta {
	padding: 26px 30px;
	border-radius: var( --wp--custom--radius--card );
	background: var( --wp--preset--color--neutral-950 );
	color: var( --wp--preset--color--neutral-000 );
}

.wp-block-group.is-style-tma-inline-cta > :first-child {
	margin-top: 0;
}

.wp-block-group.is-style-tma-inline-cta > :last-child {
	margin-bottom: 0;
}

.wp-block-group.is-style-tma-inline-cta :where( h2, h3, h4 ) {
	color: var( --wp--preset--color--neutral-000 );
	margin-top: 0;
}

.wp-block-group.is-style-tma-inline-cta p {
	color: var( --wp--preset--color--neutral-300 );
}

/* Data table: the dark header row from the design. A block style rather than a
   blanket table rule, because the theme already styles ordinary tables and
   most of them should stay as they are. */
/* A three-column table of numbers cannot usefully reflow to 320px: squeezing
   it breaks the headings mid-word. It scrolls sideways instead, which keeps
   every figure readable and the column headings intact. */
.wp-block-table.is-style-tma-data {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table.is-style-tma-data table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var( --wp--custom--radius--image );
	overflow: hidden;
	min-width: 420px;
}

.wp-block-table.is-style-tma-data :is( th, td ) {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.wp-block-table.is-style-tma-data th {
	background: var( --wp--preset--color--neutral-950 );
	color: var( --wp--preset--color--neutral-000 );
	font-family: var( --wp--preset--font-family--open-sans );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: left;
	padding: 13px 18px;
	border: 0;
}

.wp-block-table.is-style-tma-data td {
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--neutral-200 );
	font-size: var( --wp--preset--font-size--small );
	font-variant-numeric: tabular-nums;
}

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

.wp-block-table.is-style-tma-data tbody tr:nth-child( even ) td {
	background: var( --wp--preset--color--neutral-050 );
}

.wp-block-table.is-style-tma-data figcaption {
	margin-top: 12px;
	font-size: var( --wp--preset--font-size--caption );
	color: var( --wp--preset--color--neutral-600 );
}

/* ==========================================================================
   9. Tables
   Header Neutral 100, zebra Neutral 050, hairlines Neutral 100, no vertical
   rules. Numeric columns right-aligned and tabular.
   ========================================================================== */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	background-color: var( --wp--preset--color--neutral-100 );
	color: var( --wp--preset--color--neutral-700 );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 18px;
	border: 0;
}

.wp-block-table td {
	padding: 11px 18px;
	border: 0;
	border-top: 1px solid var( --wp--preset--color--neutral-100 );
}

.wp-block-table tbody tr:nth-child( even ) td {
	background-color: var( --wp--preset--color--neutral-050 );
}

/* --- The pricing comparison table -----------------------------------------
   Column headers get a 4px bottom border in Blue / Pink / Lime; the
   Performance column is an ink header over Lime 100 body cells. Scrolls
   horizontally below 720px, and collapses to stacked cards below 700px via
   the pattern's own mobile variant. */

.tma-pricing-table {
	background-color: var( --wp--preset--color--neutral-000 );
	border: var( --tma-hairline );
	border-radius: var( --wp--custom--radius--card );
	overflow-x: auto;
}

/* This table is a raw <table> inside an HTML block, not core/table, so it
   inherits none of the .wp-block-table rules above -- everything it needs is
   declared here. See patterns/pricing-table.php for why. */
.tma-pricing-table table {
	min-width: 720px;
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.tma-pricing-table thead th {
	background: transparent;
	vertical-align: bottom;
	padding: 26px 20px 20px;
	text-transform: none;
	letter-spacing: 0;
	font-family: var( --wp--preset--font-family--poppins );
	font-size: var( --wp--preset--font-size--heading-4 );
	font-weight: 600;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-pricing-table thead th:first-child {
	padding-left: 30px;
	font-family: var( --wp--preset--font-family--open-sans );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--neutral-700 );
}

.tma-pricing-table thead th:nth-child( 2 ) { border-bottom: 4px solid var( --wp--preset--color--blue-500 ); }
.tma-pricing-table thead th:nth-child( 3 ) { border-bottom: 4px solid var( --wp--preset--color--pink-500 ); }

.tma-pricing-table thead th:nth-child( 4 ) {
	background-color: var( --wp--preset--color--neutral-950 );
	border-bottom: 4px solid var( --wp--preset--color--lime-500 );
	color: var( --wp--preset--color--neutral-000 );
	padding-right: 30px;
}

.tma-pricing-table thead th small {
	display: block;
	margin-top: 4px;
	font-family: var( --wp--preset--font-family--open-sans );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var( --wp--preset--color--neutral-600 );
}

.tma-pricing-table thead th:nth-child( 4 ) small {
	color: var( --wp--preset--color--lime-500 );
}

/* No zebra here: the Performance column carries its own Lime 100 fill, and a
   zebra behind it would fight that. Hairlines do the row separation. */
.tma-pricing-table tbody th,
.tma-pricing-table tbody td {
	padding: 15px 20px;
	text-align: left;
	border: 0;
	border-top: 1px solid var( --wp--preset--color--neutral-100 );
	font-size: var( --wp--preset--font-size--medium );
	color: var( --wp--preset--color--neutral-700 );
	font-weight: 600;
}

/* The feature name is a row header for screen readers, and reads as plain
   body copy -- not as an eyebrow like the column headers. */
.tma-pricing-table tbody th {
	padding-left: 30px;
	color: var( --wp--preset--color--neutral-800 );
	font-weight: 400;
	background: transparent;
	font-family: var( --wp--preset--font-family--open-sans );
	letter-spacing: 0;
	text-transform: none;
}

.tma-pricing-table tbody td:last-child {
	background-color: var( --wp--preset--color--lime-100 );
	border-top-color: var( --wp--preset--color--lime-200 );
	color: var( --wp--preset--color--neutral-900 );
	font-weight: 700;
	padding-right: 30px;
}

/* ==========================================================================
   10. The framework band
   Four equal brand grounds, no gap, full bleed. 2x2 at tablet, 1 column on
   phones -- the colours are the identity of the section, so they stay.
   ========================================================================== */

.tma-framework-band {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 0;
}

.tma-framework-band > * {
	margin: 0;
}

@media ( max-width: 1080px ) {
	.tma-framework-band {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.tma-framework-band {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   11. Hero decoration
   Two soft circles behind the hero. Purely decorative -- dropped below the
   nav breakpoint rather than clipped, per the handoff.
   ========================================================================== */

.tma-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tma-hero > .wp-block-group__inner-container,
.tma-hero > * {
	position: relative;
	z-index: 1;
}

.tma-hero::before,
.tma-hero::after {
	content: "";
	position: absolute;
	border-radius: var( --wp--custom--radius--pill );
	pointer-events: none;
	z-index: 0;
}

.tma-hero::before {
	width: 520px;
	height: 520px;
	top: -120px;
	right: -80px;
	background: var( --wp--preset--color--blue-900 );
	opacity: 0.55;
}

.tma-hero::after {
	width: 220px;
	height: 220px;
	top: 180px;
	right: 300px;
	background: var( --wp--preset--color--pink-900 );
	opacity: 0.6;
}

@media ( max-width: 1080px ) {
	.tma-hero::before,
	.tma-hero::after {
		display: none;
	}
}

/* ==========================================================================
   12. Section styles on dark grounds
   These pair with /styles/*.json. The JSON sets the colours the editor knows
   about; this sets what it cannot -- the focus ring and the hairline token,
   both of which have to flip on a dark ground.
   ========================================================================== */

.wp-block-group.is-style-section-ink,
.wp-block-group.is-style-section-dark,
.wp-block-group.is-style-section-blue,
.wp-block-group.is-style-section-pink,
.tma-on-dark {
	--tma-focus: var( --wp--preset--color--lime-500 );
	--tma-hairline: 1px solid var( --wp--preset--color--neutral-800 );
}

.tma-on-dark .tma-eyebrow {
	color: var( --wp--preset--color--lime-500 );
}

/* --- Links on coloured grounds ------------------------------------------
   The global link colour (Blue 700, theme.json styles.elements.link) is built
   for white and tinted grounds. On a saturated or dark ground -- the Pink 500
   and Blue 500 CTA bands, Blue / Pink 900, the ink heroes -- it drops to
   ~1.5-2.6:1 and reads as a smudge. The section style variations fix this for
   groups that use them, but most patterns (and anything an editor colours by
   hand) set backgroundColor directly, so they never got it.

   The fix is three custom properties that theme.json's link element reads:
     --tma-link            colour        (fallback Blue 700)
     --tma-link-hover      hover colour  (fallback Blue 500)
     --tma-link-decoration resting underline (fallback none)
   A coloured ground sets them to "the surrounding text colour, underlined";
   a light ground resets them. Custom properties inherit from the NEAREST
   ancestor that sets them, so a white card inside an ink section gets Blue 700
   back and a pink band inside a white page gets the underline -- something a
   descendant-selector rule cannot do. currentColor resolves on the link
   itself, i.e. to the colour it inherits, so this works whatever text colour
   the band uses (white on Pink 500, ink on Lime 500).

   Underlined because colour alone no longer separates a link from the body
   copy around it. Buttons and navigation are unaffected: core excludes
   .wp-element-button from the link element, and navigation sets its own
   colour and decoration. Components with their own link rules (post terms,
   cards, mega nav) keep them -- everything here is specificity 0.

   Not covered: a background set as a custom hex rather than a palette swatch
   emits no class. Use the palette, or add .tma-on-dark to the group. */

:where(
	.has-blue-300-background-color,
	.has-blue-500-background-color,
	.has-blue-700-background-color,
	.has-blue-900-background-color,
	.has-pink-300-background-color,
	.has-pink-500-background-color,
	.has-pink-700-background-color,
	.has-pink-900-background-color,
	.has-green-300-background-color,
	.has-green-500-background-color,
	.has-green-700-background-color,
	.has-green-900-background-color,
	.has-yellow-300-background-color,
	.has-yellow-500-background-color,
	.has-yellow-700-background-color,
	.has-yellow-900-background-color,
	.has-orange-300-background-color,
	.has-orange-500-background-color,
	.has-orange-700-background-color,
	.has-orange-900-background-color,
	.has-lime-300-background-color,
	.has-lime-500-background-color,
	.has-lime-700-background-color,
	.has-lime-900-background-color,
	.has-neutral-600-background-color,
	.has-neutral-700-background-color,
	.has-neutral-800-background-color,
	.has-neutral-900-background-color,
	.has-neutral-950-background-color,
	.wp-block-cover:not(.is-light),
	.tma-on-dark
) {
	--tma-link: currentColor;
	--tma-link-hover: currentColor;
	--tma-link-decoration: underline;
}

:where(
	.has-blue-100-background-color,
	.has-blue-200-background-color,
	.has-pink-100-background-color,
	.has-pink-200-background-color,
	.has-green-100-background-color,
	.has-green-200-background-color,
	.has-yellow-100-background-color,
	.has-yellow-200-background-color,
	.has-orange-100-background-color,
	.has-orange-200-background-color,
	.has-lime-100-background-color,
	.has-lime-200-background-color,
	.has-neutral-000-background-color,
	.has-neutral-050-background-color,
	.has-neutral-100-background-color,
	.has-neutral-200-background-color,
	.has-neutral-300-background-color,
	.has-neutral-400-background-color,
	.wp-block-cover.is-light
) {
	--tma-link: initial;
	--tma-link-hover: initial;
	--tma-link-decoration: initial;
}

/* A little heavier on hover/focus, so the state change is visible when the
   colour no longer changes. */
:where(
	.has-background,
	.wp-block-cover,
	.tma-on-dark
) a:where(:not(.wp-element-button)):is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.18em;
}

/* Divider inside a dark card. */
.tma-divide-light {
	border-top: 1px solid rgba( 255, 255, 255, 0.18 );
	padding-top: 24px;
}

/* ==========================================================================
   13. Merger badge -- the three-dot pill in the hero
   ========================================================================== */

.tma-merger-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 15px 7px 11px;
	border-radius: var( --wp--custom--radius--pill );
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid var( --wp--preset--color--neutral-800 );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var( --wp--preset--color--neutral-000 );
	margin: 0;
}

.tma-merger-badge::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 8px;
	background:
		radial-gradient( circle 4px at 4px 4px, var( --wp--preset--color--blue-500 ) 100%, transparent 0 ) 0 0 / 12px 8px no-repeat,
		radial-gradient( circle 4px at 4px 4px, var( --wp--preset--color--pink-500 ) 100%, transparent 0 ) 10px 0 / 12px 8px no-repeat,
		radial-gradient( circle 4px at 4px 4px, var( --wp--preset--color--lime-500 ) 100%, transparent 0 ) 20px 0 / 12px 8px no-repeat;
}

/* ==========================================================================
   14. Logo in the header / footer
   ========================================================================== */

/* The lockup is ~1.79:1, so height 27px renders it about 48px wide.
   BRAND.md §6 sets a 140px minimum width (which would be ~78px tall, taller
   than this whole 58px bar). The design file and the brand guide contradict
   each other here; the design is implemented as drawn and the conflict is
   flagged in README.md under "Open questions". Do not add a min-width to
   "fix" it -- in a nowrap flex row that just overflows the viewport. */
.tma-logo img,
.tma-logo svg {
	display: block;
	height: 27px;
	width: auto;
}

.tma-logo--footer img {
	height: 26px;
	width: auto;
	display: block;
}

@media ( max-width: 600px ) {
	.tma-logo img,
	.tma-logo svg {
		height: 22px;
	}
}

/* ==========================================================================
   14b. Screen-reader-only text
   Used by the pricing table caption and the burger label. Core ships a
   .screen-reader-text rule in the block library, but relying on another
   stylesheet's utility class for our own markup is how things silently break.
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var( --wp--preset--color--neutral-000 );
	clip-path: none;
	color: var( --wp--preset--color--blue-700 );
	display: block;
	font-size: var( --wp--preset--font-size--small );
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   14c. Clickable blocks
   A Group, Column, Cover or Media & Text with a block link (inc/block-link.php).
   The real link is visually hidden; assets/js/block-link.js forwards clicks
   on the block to it. When the link has keyboard focus the whole block shows
   the focus ring, since the link itself has no visible box.
   ========================================================================== */

.has-tma-link {
	cursor: pointer;
}

.tma-block-link {
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.has-tma-link:has( > .tma-block-link:focus-visible ) {
	outline: 2px solid var( --tma-focus );
	outline-offset: 2px;
}

/* ==========================================================================
   15. Icons
   Font Awesome supplies the glyph; this supplies the sizing and alignment.
   An inline icon deliberately inherits colour and font-size from the text it
   sits in -- an icon in a sentence that does not track the sentence is the
   fastest way to make body copy look broken at another breakpoint.
   ========================================================================== */

.tma-icon {
	display: inline-block;
	color: inherit;
	font-size: inherit;
	font-style: normal;
	line-height: 1;
	/* Nudge off the baseline: FA's box is taller than its glyph. */
	vertical-align: -0.08em;
}

/*
 * Block sizes are `em`, not the font-size presets. The presets are a body
 * copy scale -- small/medium/large are 14, 15 and 17px, three sizes an icon
 * cannot tell apart -- and the `display` preset is 60px, which is a hero
 * heading, not an icon. Multiples of the inherited size give four steps that
 * are actually distinguishable and keep an icon proportional to whatever it
 * is sitting next to.
 */
.tma-icon--small {
	font-size: 1em;
}

.tma-icon--medium {
	font-size: 1.5em;
}

.tma-icon--large {
	font-size: 2.25em;
}

.tma-icon--display {
	font-size: 3.5em;
}

.tma-icon-block {
	margin: 0 0 var( --wp--preset--spacing--s );
	line-height: 1;
}

.tma-icon-block.has-text-align-center {
	text-align: center;
}

.tma-icon-block.has-text-align-right {
	text-align: right;
}

/* ==========================================================================
   16. HubSpot forms

   Shared by the hubspot-form block and event registration, so it lives here
   rather than in either block's stylesheet -- a block stylesheet only loads
   when that block is on the page, and an event page carries neither.

   HubSpot's developer embed renders through its `hsfc-` renderer, which is
   themed with `--hsf-*` custom properties. Setting those rather than chasing
   generated class names is the whole reason these forms can be made to look
   like the site without the theme breaking every time HubSpot ships a markup
   change -- the variables are a supported surface, the class names are not.
   Only the handful of things the variables do not reach are done by class
   below.

   The form's own HubSpot theme sets these variables too -- white labels,
   padded and centred -- so the selector is one class deeper in order to win.
   ========================================================================== */

.tma-hsform [data-hsfc-id="Renderer"] {
	--hsf-global__font-family: var( --wp--preset--font-family--open-sans );
	--hsf-global__font-size: var( --wp--preset--font-size--medium );
	--hsf-global__color: var( --wp--preset--color--neutral-800 );
	--hsf-global-error__color: var( --wp--preset--color--orange-700 );
	--hsf-erroralert__color: var( --wp--preset--color--orange-700 );

	--hsf-background__background-color: transparent;
	--hsf-background__padding: 0;
	--hsf-background__border-width: 0;
	--hsf-background__border-radius: 0;
	--hsf-row__vertical-spacing: 16px;
	--hsf-row__horizontal-spacing: 12px;
	--hsf-module__vertical-spacing: 6px;

	--hsf-field-label__font-family: var( --wp--preset--font-family--open-sans );
	--hsf-field-label__font-size: var( --wp--preset--font-size--small );
	--hsf-field-label__color: var( --wp--preset--color--neutral-900 );
	--hsf-field-label-requiredindicator__color: var( --wp--preset--color--orange-700 );
	--hsf-field-description__color: var( --wp--preset--color--neutral-700 );

	--hsf-field-input__font-family: var( --wp--preset--font-family--open-sans );
	--hsf-field-input__color: var( --wp--preset--color--neutral-900 );
	--hsf-field-input__background-color: var( --wp--preset--color--neutral-000 );
	--hsf-field-input__placeholder-color: var( --wp--preset--color--neutral-600 );
	--hsf-field-input__border-color: var( --wp--preset--color--neutral-300 );
	--hsf-field-input__border-width: 1px;
	--hsf-field-input__border-style: solid;
	--hsf-field-input__border-radius: var( --wp--custom--radius--button );
	--hsf-field-input__padding: 10px 12px;

	--hsf-button__font-family: var( --wp--preset--font-family--open-sans );
	--hsf-button__font-size: var( --wp--preset--font-size--small );
	--hsf-button__color: var( --wp--preset--color--neutral-000 );
	--hsf-button__background-color: var( --wp--preset--color--blue-700 );
	--hsf-button__background-image: none;
	--hsf-button__border-radius: var( --wp--custom--radius--button );
	--hsf-button__padding: 13px 20px;
	--hsf-button__box-shadow: none;
	--hsf-button--hover__color: var( --wp--preset--color--neutral-000 );
	--hsf-button--hover__background-color: var( --wp--preset--color--blue-900 );
	--hsf-button--focus__color: var( --wp--preset--color--neutral-000 );
	--hsf-button--focus__background-color: var( --wp--preset--color--blue-900 );

	max-width: none;
	margin: 0;
	text-align: left;
}

.tma-hsform .hsfc-FieldLabel {
	color: var( --wp--preset--color--neutral-900 );
	font-weight: 600;
}

.tma-hsform :is( .hsfc-TextInput, .hsfc-TextareaInput, .hsfc-PhoneInput, .hsfc-DropdownInput ) {
	width: 100%;
}

.tma-hsform :is( .hsfc-TextInput, .hsfc-TextareaInput ):focus {
	border-color: var( --wp--preset--color--blue-700 );
	outline: 2px solid var( --wp--preset--color--blue-100 );
	outline-offset: 0;
}

/* On a dark ground only the values that depend on it are restated; everything
   structural above still applies. */
.tma-on-dark .tma-hsform [data-hsfc-id="Renderer"] {
	--hsf-global__color: var( --wp--preset--color--neutral-200 );
	--hsf-field-label__color: var( --wp--preset--color--neutral-000 );
	--hsf-field-description__color: var( --wp--preset--color--neutral-300 );
	--hsf-field-input__color: var( --wp--preset--color--neutral-000 );
	--hsf-field-input__background-color: var( --wp--preset--color--neutral-900 );
	--hsf-field-input__placeholder-color: var( --wp--preset--color--neutral-400 );
	--hsf-field-input__border-color: var( --wp--preset--color--neutral-700 );
	--hsf-button__color: var( --wp--preset--color--neutral-950 );
	--hsf-button__background-color: var( --wp--preset--color--lime-500 );
	--hsf-button--hover__color: var( --wp--preset--color--neutral-950 );
	--hsf-button--hover__background-color: var( --wp--preset--color--lime-300 );
	--hsf-button--focus__color: var( --wp--preset--color--neutral-950 );
	--hsf-button--focus__background-color: var( --wp--preset--color--lime-300 );
	/* orange-700 is unreadable on neutral-950; orange-300 clears AA on it. */
	--hsf-global-error__color: var( --wp--preset--color--orange-300 );
	--hsf-erroralert__color: var( --wp--preset--color--orange-300 );
}

.tma-on-dark .tma-hsform .hsfc-FieldLabel {
	color: var( --wp--preset--color--neutral-000 );
}

/* ==========================================================================
   17. Editor-only corrections
   The editor canvas has no <body> background from theme.json on dark
   sections, so give full-bleed groups room to read correctly.
   ========================================================================== */

.editor-styles-wrapper .tma-hero::before,
.editor-styles-wrapper .tma-hero::after {
	display: none;
}