/*
 * Maps the marketing vocabulary in landing.css onto core block markup.
 *
 * landing.css was written for hand-authored templates, so the classes it
 * targets sit on elements the block editor does not produce. Everything here
 * bridges that gap: block wrappers that need their default spacing removed,
 * core buttons that need the .tf-btn treatment on their inner anchor, and
 * decorative children (kicker dot, link arrow) that block markup cannot carry.
 */

/* Layout containers ------------------------------------------------------ */

/* Our grids and flex rows lay themselves out; core's flow gap fights them. */
.tf-card-grid > * + *,
.tf-feature-grid > * + *,
.tf-trust-grid > * + *,
.tf-product-grid > * + *,
.tf-provider-grid > * + *,
.tf-integration-grid > * + *,
.tf-audience-grid > * + *,
.tf-process-grid > * + *,
.tf-platform-strip > * + *,
.tf-hero-inner > * + *,
.tf-value-frame-inner > * + *,
.tf-cta > * + *,
.tf-nav-inner > * + *,
.tf-capability-grid > * + *,
.tf-capability > * + *,
.tf-showcase > * + *,
.tf-showcase-copy > * + *,
.tf-showcase-media > * + *,
.tf-section-actions > * + *,
.tf-figure > * + *,
.tf-figure-ledger > * + *,
.tf-figure-checkout > * + *,
.tf-hero-products > * + *,
.tf-hero-product > * + *,
.tf-hero-product-stage > * + *,
.tf-bridge > * + *,
.tf-bridge-panel > * + *,
.tf-flow > * + *,
.tf-flow-stage > * + *,
.tf-provider-points > * + *,
.tf-product-points > * + *,
.tf-service-grid > * + *,
.tf-service-includes > * + *,
.tf-plan-grid > * + *,
.tf-plan-list > * + *,
.tf-plan-platforms > * + *,
.tf-included-grid > * + *,
.tf-form-layout > * + *,
/*
 * landing.css gives every child of a feature card its own bottom margin, so
 * core's flow gap lands on top of that and doubles the icon-to-heading space.
 */
.tf-feature-card > * + * {
	margin-block-start: 0;
}

.tf-main > .wp-block-group,
.tf-container > .wp-block-group {
	margin-block-start: 0;
}

.wp-block-group.tf-container {
	max-width: var(--tf-container);
}

/* Kicker ----------------------------------------------------------------- */

/*
 * The classic templates wrote an explicit <span class="tf-kicker-dot">. A
 * paragraph block cannot, so draw the dot for kickers that have no child.
 */
.tf-kicker:not(:has(.tf-kicker-dot))::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 999px;
	background: var(--tf-brand-gradient);
	vertical-align: middle;
}

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

/*
 * landing.css styles .tf-btn and its size variants as the button itself. On a
 * core button block those classes land on the wrapper div rather than the
 * anchor, so the wrapper inherits the padding and background and the visible
 * control ends up inset from the text column it should line up with. Strip the
 * wrapper back to a plain box; the rules below dress the anchor instead.
 */
.wp-block-button.tf-btn,
.wp-block-button.tf-btn-lg,
.wp-block-button.tf-btn-sm,
.wp-block-button.tf-btn-primary,
.wp-block-button.tf-btn-secondary {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.wp-block-button.is-style-tf-primary > .wp-block-button__link,
.wp-block-button.is-style-tf-secondary > .wp-block-button__link,
.wp-block-button.is-style-tf-arrow > .wp-block-button__link,
.wp-block-button.tf-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: transform 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.wp-block-button.is-style-tf-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-tf-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-tf-arrow > .wp-block-button__link:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

.wp-block-button.is-style-tf-primary > .wp-block-button__link,
.wp-block-button.is-style-tf-arrow > .wp-block-button__link {
	border-color: var(--tf-text);
	background: var(--tf-text);
	color: var(--tf-bg);
}

.wp-block-button.is-style-tf-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-tf-arrow > .wp-block-button__link:hover {
	border-color: oklch(12% 0.01 80);
	background: oklch(12% 0.01 80);
}

.wp-block-button.is-style-tf-secondary > .wp-block-button__link {
	border-color: var(--tf-border-strong);
	background: transparent;
	color: var(--tf-text);
}

.wp-block-button.is-style-tf-secondary > .wp-block-button__link:hover {
	background: var(--tf-surface);
}

.wp-block-button.tf-btn-lg > .wp-block-button__link {
	min-height: 50px;
	padding: 13px 24px;
	font-size: 15px;
}

.wp-block-button.tf-btn-sm > .wp-block-button__link {
	min-height: 38px;
	padding: 7px 14px;
	font-size: 13px;
}

/* The classic markup nested an <svg> arrow; block buttons get it from CSS. */
/* Cards rendered from PHP still nest a real <svg>, so skip those. */
.wp-block-button.is-style-tf-arrow > .wp-block-button__link::after,
.wp-block-read-more.is-style-tf-arrow::after,
a.tf-content-card-link:not(:has(.tf-btn-arrow))::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	background: currentColor;
	vertical-align: -1px;
	transition: transform 120ms ease-out;
	-webkit-mask: var(--tf-arrow-mask) center / contain no-repeat;
	mask: var(--tf-arrow-mask) center / contain no-repeat;
}

.wp-block-button.is-style-tf-arrow > .wp-block-button__link:hover::after,
.wp-block-read-more.is-style-tf-arrow:hover::after,
a.tf-content-card-link:not(:has(.tf-btn-arrow)):hover::after {
	transform: translateX(3px);
}

:root {
	--tf-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

.wp-block-buttons.tf-hero-actions,
.wp-block-buttons.tf-cta-actions,
.wp-block-buttons.tf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

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

/*
 * .tf-cta is a dark panel. landing.css already inverts the classic .tf-btn
 * classes on it, but block markup uses the is-style-* variants, so the
 * inversions have to be repeated for those. Without this the panel renders a
 * dark button on a dark panel and an outline button with no readable label.
 */
.tf-cta .wp-block-button.is-style-tf-primary > .wp-block-button__link,
.tf-cta .wp-block-button.is-style-tf-arrow > .wp-block-button__link {
	border-color: var(--tf-bg);
	background: var(--tf-bg);
	color: var(--tf-text);
}

.tf-cta .wp-block-button.is-style-tf-primary > .wp-block-button__link:hover,
.tf-cta .wp-block-button.is-style-tf-arrow > .wp-block-button__link:hover {
	border-color: white;
	background: white;
}

.tf-cta .wp-block-button.is-style-tf-secondary > .wp-block-button__link {
	border-color: color-mix(in oklch, var(--tf-bg) 30%, transparent);
	background: transparent;
	color: var(--tf-bg);
}

.tf-cta .wp-block-button.is-style-tf-secondary > .wp-block-button__link:hover {
	background: color-mix(in oklch, var(--tf-bg) 10%, transparent);
}

/*
 * theme.json colours every heading with the dark contrast token as a direct
 * declaration, which beats the light colour the panel passes down by
 * inheritance. Restate it so the heading is legible on the dark panel.
 */
.tf-cta :is(h1, h2, h3),
.tf-cta .wp-block-heading {
	color: var(--tf-bg);
}

/* Navigation ------------------------------------------------------------- */

.tf-nav .wp-block-navigation {
	--navigation-layout-justification-setting: center;
	font-size: 14px;
	font-weight: 500;
}

.tf-nav .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--tf-text-2);
	text-decoration: none;
	transition: color 120ms ease-out;
}

.tf-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.tf-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--tf-text);
	text-decoration: none;
}

.tf-nav .wp-block-navigation__responsive-container-open,
.tf-nav .wp-block-navigation__responsive-container-close {
	color: var(--tf-text);
}

.tf-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--tf-bg);
	padding: 24px 32px;
}

.tf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 20px;
}

/*
 * The rest of the theme switches to its compact layout at 720px, but the
 * Navigation block hands over to its overlay at 600px. Extend the overlay up
 * to 720px so the header breaks at the same width as everything else.
 */
@media (min-width: 600px) and (max-width: 720px) {
	.tf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

/* Icon block ------------------------------------------------------------- */

.wp-block-thefalta-icon.tf-feature-icon {
	display: grid;
	place-items: center;
}

/* Site branding ---------------------------------------------------------- */

.wp-block-site-title a {
	color: var(--tf-text);
	text-decoration: none;
}

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

.tf-footer-bottom p {
	margin: 0;
}

/* Navigation submenus ---------------------------------------------------- */

/*
 * Core's dropdown ships with its own border and square corners, which read as a
 * different design system sitting under our header. This restates it in theme
 * tokens. The mobile overlay renders the same markup inline, so the panel
 * styling is scoped to the desktop dropdown only.
 */
.tf-nav-menu .wp-block-navigation__submenu-container {
	/*
	 * The header sets a 28px block gap for the top-level row. A dropdown
	 * inherits it and ends up with the items floating apart, so it is reset
	 * here rather than lowered on the nav itself.
	 */
	gap: 2px;
	min-width: 210px;
	padding: 7px;
	border: 1px solid var(--tf-border);
	border-radius: 12px;
	background: var(--tf-surface);
	box-shadow: var(--tf-shadow-md);
}

/* Core's own 7px/14px padding already gives a 40px row, so only the skin
   is restated here. */
.tf-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
	color: var(--tf-text-2);
	font-size: 14px;
	white-space: nowrap;
}

.tf-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.tf-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--tf-bg);
	color: var(--tf-text);
}

/*
 * .tf-nav carries a backdrop-filter, which makes it the containing block for
 * any descendant using position: fixed. That clips core's full-screen mobile
 * menu to the height of the header, so only the first item sits on the white
 * panel and the rest paint over the page. Dropping the filter while the menu
 * is open lets the overlay resolve against the viewport again; the blur is
 * invisible at that moment anyway, because the menu covers the page.
 */
.tf-nav:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Inside the mobile overlay the list is already stacked; drop the panel. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/*
 * The overlay renders parents and children at the same size, so twelve items
 * read as one flat list. A step down on the children restores the hierarchy.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--tf-text-2);
	font-size: 0.78em;
}

/* Media ------------------------------------------------------------------ */

.wp-block-image.tf-product-screenshot,
.wp-block-image.tf-faltapay-lockup {
	margin: 0;
}

.wp-block-image.tf-product-screenshot img {
	width: 100%;
	height: auto;
}