/*
Theme Name: WholeFunnel
Theme URI: https://wholefunnel.ai
Author: WholeFunnel AI
Author URI: https://wholefunnel.ai
Description: Standalone hand-rolled theme for wholefunnel.ai — brand chrome (locked lockup header, favicon links, self-hosted fonts, wf-tokens) with Elementor-owned marketing page bodies and Gutenberg posts/legal. Built per WHOLEFUNNEL_BUILD_PLAN §9b/§11.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wholefunnel
*/

/* All brand values come from wf-tokens.css (var(--wf-*)) — none are defined here. */

/* ---------- Layout contract (2026-07-30 corrective pass, §11.11) ----------
   ONE alignment contract across header, main content, and footer:
   shared content maximum 1140px (matches the Elementor kit container width),
   horizontal viewport gutter 24px desktop/tablet, 20px mobile (≤767px, the
   Elementor mobile breakpoint — keep both layers on the same boundary).
   These are THEME LAYOUT variables, not brand tokens — brand lives in
   wf-tokens.css; layout lives here. */
:root {
	--wfl-content-max: 1140px;
	--wfl-gutter: 24px;
}

@media (max-width: 767px) {
	:root {
		--wfl-gutter: 20px;
	}
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* Sticky-footer shell: normal-flow column; main grows, footer stays in flow.
   Admin-bar-aware: WP core sets --wp-admin--admin-bar--height when logged in;
   anonymous visitors get the 0px fallback (= full 100vh). No fixed positioning,
   no JS, no hardcoded heights. */
body {
	margin: 0;
	font-family: var(--wf-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wf-ink);
	background: var(--wf-bg);
	display: flex;
	flex-direction: column;
	/* ⚠ REFERENCE FRAME. 100vh is the LARGE viewport — toolbars collapsed. On a real
	   iPhone at first paint the visible area is the SMALL viewport: measured on an
	   iPhone 17 Pro Max, screen.height 956 / 100lvh 836 / 100svh 796. Sizing the shell
	   to 100vh therefore overshoots the visible area by the toolbar-collapse delta
	   (40px on that device). dvh tracks the live viewport instead.
	   dvh, not svh: svh would clear at first paint but leave a visible gap under the
	   footer once the toolbars collapse — the classic short-page artifact.
	   vh first as the fallback for engines without dynamic units. */
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wf-main {
	flex: 1 0 auto;
}

.wf-header,
.wf-footer {
	flex-shrink: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--wf-font-heading);
	font-weight: 600;
	color: var(--wf-navy);
	line-height: var(--wf-leading-heading, 1.2);
	margin: 0 0 0.6em;
}

/* Tablet + mobile heading leading (≤1024px = the Elementor tablet ceiling;
   the kit typography carries the same values for Elementor-rendered headings). */
@media (max-width: 1024px) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: var(--wf-leading-heading-mobile, 1.15);
	}
}

h1 {
	font-size: clamp(2rem, 5vw, 2.75rem);
	letter-spacing: -0.01em;
}

h2 {
	font-size: clamp(1.5rem, 3.5vw, 2rem);
}

p {
	margin: 0 0 1.25em;
}

a {
	color: var(--wf-azure);
}

a:focus-visible {
	outline: 2px solid var(--wf-azure);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Inline content links: persistent non-color cue (underline), scoped to
   content contexts only — never the logo link, nav, or button-style links.
   The .elementor prefix outranks Elementor's own `.elementor a
   { text-decoration: none }` reset in frontend.min.css (equal specificity
   loses on load order; one extra class wins without !important). */
.entry-content a:not(.wp-block-button__link),
.elementor .elementor-widget-text-editor a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry-content a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):focus-visible,
.elementor .elementor-widget-text-editor a:hover,
.elementor .elementor-widget-text-editor a:focus-visible {
	text-decoration-thickness: 2px;
}

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

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	clip: auto;
	clip-path: none;
	background: var(--wf-bg);
	color: var(--wf-azure);
	border: 1px solid var(--wf-line);
	border-radius: 4px;
	white-space: normal;
}

/* ---------- Layout ---------- */
.wf-container {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px var(--wfl-gutter);
}

/* ---------- Header ---------- */
.wf-header {
	border-bottom: 1px solid var(--wf-line);
	background: var(--wf-bg);
}

/* border-box: content max + both gutters, so the inner content edge lands at
   the same x as the Elementor container's inner box (which centers its
   content-width INSIDE the padded full-width container). */
.wf-header-inner {
	max-width: calc(var(--wfl-content-max) + 2 * var(--wfl-gutter));
	margin: 0 auto;
	padding: 20px var(--wfl-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* Locked lockup recipe (§9b): max-width 304px at intrinsic 4588x906 */
.wf-brand {
	display: block;
	line-height: 0;
}

.wf-brand img {
	max-width: 304px;
	height: auto;
	display: block;
}

.wf-nav .wf-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	margin: 0;
	padding: 0;
	justify-content: center;
}

/* 44px minimum touch target (WCAG 2.5.5) via padding, not type size.
   ⚠ On DESKTOP the nav shares the 60px lockup row, so the links add no header
   height. On MOBILE .wf-header-inner wraps the nav onto its own row, so every
   nav row costs a full 44px — which is how the 101px desktop header became
   213px on a phone. See the ≤767px block below for the mobile treatment. */
.wf-nav a {
	font-family: var(--wf-font-body);
	font-weight: 500;
	color: var(--wf-navy);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
}

.wf-nav a:hover,
.wf-nav a:focus {
	color: var(--wf-azure);
}

.wf-nav a[aria-current="page"] {
	color: var(--wf-azure);
	box-shadow: inset 0 -2px 0 var(--wf-azure);
}

@media (min-width: 1025px) {
	.wf-nav .wf-menu {
		gap: 0 20px;
		justify-content: flex-end;
	}
}

/* ---------- Header: mobile treatment (≤767px) ----------
   ROOT CAUSE, not symptom. Desktop renders 101px; the SAME rules produced
   213px on a phone because two separate wraps compound:
     1. .wf-header-inner has flex-wrap:wrap, so the nav drops BELOW the lockup;
     2. .wf-menu has flex-wrap:wrap, so five 44px links break onto two rows.
   Result: 20 pad + 60 lockup + 24 gap + 88 nav + 20 pad + 1 border = 213px,
   which consumed 27% of an 800px viewport before any value proposition.
   Fix both wraps, size the lockup for a phone, and drop the redundant Home
   link (the lockup already links home) so four links fit ONE row.
   Measured at 360px: Services 70 + Pricing 58 + About 51 + Contact 65 = 244px
   of links inside 320px of available width — no overflow, 44px targets kept. */
@media (max-width: 767px) {
	.wf-header-inner {
		flex-wrap: nowrap;      /* was wrap: this dropped the nav below the lockup */
		flex-direction: column; /* deliberate stack — one row each, never wrapped */
		align-items: center;
		justify-content: center;
		gap: 1px;               /* was 4px — 3 of the 6px that fund the larger lockup */
		padding: 6px var(--wfl-gutter);  /* was 8px — the other 4px, 2 per side */
	}

	/* ---- Lockup size (owner-approved "Option B", 2026-08-02) ----
	   The 150px lockup rendered the MARK at 29.61px, and the mark's internal
	   detail scales with it: band 5.39px, azure block 5.26px. Measured, the
	   wordmark's cap height was 10.22px against a nav link's 11.0px cap height
	   (TextMetrics, not a font-metric assumption) — a brand:nav ratio of 0.93x,
	   i.e. the company name rendered SMALLER than the word "Pricing" beneath it.
	   220px puts the mark at 43.44px, band 7.91, azure 7.72, ratio 1.36x.

	   Header slack was measured at 0.00px across five widths (contents 77.61 vs
	   interior 77.61), so none of this came free from the header box. It is paid
	   for by 6px of the header's own chrome above plus the hero's --padding-top
	   24 -> 16 below. NET FOLD COST: -0.6px (the CTA moves UP slightly). */
	.wf-brand img {
		max-width: 220px;
	}

	/* 44px minimum touch target (WCAG 2.5.5) — the brand IS a link, and it was
	   a 29.6px target sitting above nav links that are all 44px. min-height
	   pins the row at 44 while the 43.44px image keeps its visual size, so this
	   costs 0.56px of header, not a resized logo. Because the row is pinned at
	   44 either way, the lockup could grow to 222.8px for free if ever wanted. */
	.wf-brand {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* ⚠ Do NOT add flex-wrap:nowrap here. It was tried and reverted: with
	   justify-content:center it pushed documentElement.scrollWidth to 366 at a
	   360px viewport — a 6px horizontal scroll on the narrowest supported width.
	   It is also unnecessary: hiding the redundant Home link leaves four items
	   totalling 274px inside 320px of available width, so the row does not wrap.
	   Keeping the inherited `wrap` also means the safe failure mode if a fifth
	   item is ever added is a taller header, not a sideways-scrolling page. */
	.wf-nav .wf-menu {
		gap: 0 10px;
		justify-content: center;
	}

	.wf-nav a {
		font-size: 15px;
		padding: 0 4px;         /* min-height:44px is inherited and retained */
	}

	/* Home is redundant on a phone — the lockup above it already links home.
	   Targeted by WP's own body class, not :first-child, so reordering the
	   menu cannot silently hide the wrong link. */
	.wf-header .wf-menu > li.menu-item-home {
		display: none;
	}

	/* ---- Hero vertical budget (owner-approved 2026-08-02) ----
	   At 360x800 only ~205px sits between the CTA block and the fold, and the
	   hero illustration's two outcome labels have to clear it — they are the
	   before/after comparison the whole illustration argues with.
	   ⚠ Elementor applies container padding through --padding-top on .e-con.
	   The shorthand on .e-con-boxed does NOT match; it lands on the outer
	   element while .e-con-inner keeps its own 48px, so it ADDS rather than
	   replaces. Proven with a positive control (--padding-top:200px moved the
	   container exactly +152 = 200-48). See CONFIG-SEAMS null-result rule.
	   48 -> 24 frees 24px. The extra 2px of row-gap is a deliberate, minimal
	   draw on the spacing reserve: it buys the band-gap ratio back to the
	   system value (15.5% vs the wide composition's 16.0%) instead of leaving
	   the illustration on an off-system 13.8%.
	   2026-08-02, Option B: 24 -> 16 funds 8px of the larger lockup above. The
	   header grew 7.39px and this gives back 8, so the net effect on everything
	   below is -0.61px — the CTA and the illustration labels all move UP.
	   ⚠ --row-gap stays 22px. It sits BELOW the CTA (between the copy block and
	   the illustration), so it cannot buy CTA clearance, and FOLD-DECISIONS #4
	   ties it to the 15.5% band-gap ratio. Do not draw on it. */
	main .elementor-29 > .e-con:first-child {
		--padding-top: 16px;
		/* --padding-bottom added 2026-08-04 (spacing pass). The kit default dropped
		   48 -> 16 on mobile, and the hero's diagnosis bar sits deep in its own padding
		   BY DESIGN (FOLD-DECISIONS #1) — at 375 the bar's ink ran to -2.8px of the next
		   section's heading. 48 restores ~37px of ink separation. It lives HERE, not in
		   page data: this rule already owns the hero's mobile padding for the fold
		   budget, and a per-element dimensions dict with empty sides is NOT emitted by
		   the current Elementor anyway (verified against post-29.css) — a half-filled
		   dict in page data would be a dormant clobber trap for --padding-top above. */
		--padding-bottom: 48px;
		--row-gap: 22px;
		--gap: 22px 24px;
	}
}

/* ---------- Header: phone LANDSCAPE (short viewport) ----------
   Landscape phones are WIDER than 767px, so they were getting the 101px desktop
   header — 26–28% of a 360–430px-tall viewport. Measured consequence before this
   rule: the subhead was clipped at every landscape size and NEITHER call to action
   was above the fold (67–90px below it).
   Keyed on viewport HEIGHT, not width, because that is the actual constraint.
   Verified trigger: matches 844x390 / 800x360 / 932x430 and does NOT match
   1024x768 tablet-landscape, 1366x768, 1440x900, or 768x1024 tablet-portrait.
   Unlike portrait this uses a ROW layout — landscape has width to spare, so the
   lockup and the nav sit side by side and all five links stay visible (no need to
   hide Home). Measured: 101px -> 57px, subhead above the fold at all three sizes,
   both CTAs above the fold at 844x390 and 932x430. 800x360 remains ~14px short —
   accepted; landscape is a brief-use orientation and nothing is unreachable. */
@media (orientation: landscape) and (max-height: 500px) {
	.wf-header-inner {
		flex-wrap: nowrap;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 6px var(--wfl-gutter);
	}

	.wf-brand img {
		max-width: 150px;
	}

	.wf-nav .wf-menu {
		gap: 0 12px;
		justify-content: flex-end;
	}

	.wf-nav a {
		font-size: 15px;
		padding: 0 6px;
	}

	/* The hero container's own block padding is the second-largest consumer of a
	   short viewport. Elementor sets it via --padding-top on .e-con (NOT the
	   shorthand on .e-con-boxed — that selector does not match, see CONFIG-SEAMS
	   null-result rule). 48 -> 16 is what lifts both CTAs above the fold at 844x390. */
	main .elementor-29 > .e-con:first-child {
		--padding-top: 16px;
		--padding-bottom: 16px;
	}
}

/* ---------- Content ---------- */
.wf-main article {
	margin-bottom: 2.5em;
}

.entry-title a {
	color: var(--wf-navy);
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--wf-azure);
}

.entry-meta {
	font-size: 0.9375rem;
	color: var(--wf-ink);
	margin: -0.4em 0 1.2em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

blockquote {
	margin: 1.5em 0;
	padding: 0.5em 0 0.5em 1.25em;
	border-left: 3px solid var(--wf-azure);
	background: var(--wf-azure-soft);
}

/* Icon lists end a section the way a paragraph does: match the theme's
   paragraph bottom margin (1.25em, from `p{margin:0 0 1.25em}`) so the
   inter-section rhythm is uniform. Set once — reusable pattern.
   The extra .elementor class outranks Elementor's own `margin:0` reset in
   widget-icon-list.min.css (equal specificity loses on load order — A9). */
.elementor .elementor-widget-icon-list .elementor-icon-list-items {
	margin-block-end: 1.25em;
}

/* CTA pair: plain inline links side by side, gutter-constant gap,
   44px touch targets via padding-box height (type size unchanged). */
.wf-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--wfl-gutter);
}

.wf-cta a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Light Gutenberg support on the brand tokens */
.wp-block-button__link {
	background: var(--wf-azure);
	color: var(--wf-bg);
	border-radius: 6px;
}

.wp-element-button:focus-visible {
	outline: 2px solid var(--wf-navy);
}

/* ---------- Front page (page.php, is_front_page) ---------- */
.home .wf-container {
	text-align: center;
	padding-top: 64px;
	padding-bottom: 64px;
}

.home .entry-content ul {
	display: inline-block;
	text-align: left;
	margin: 1.5em auto;
}

/* ---------- Services artwork display caps (2026-08-05) ----------
   The two Services artworks are fixed-viewBox SVGs, so every internal label renders at
   user-units x (display-width / viewBox-width): display width IS the type scale. Uncapped,
   the panel filled the 1140px column and its claim numerals rendered at 63.3px against a
   32px section H2 — a data label outranking the page hierarchy (measured 2026-08-05:
   panel steps 41.2px, values 47.5px; flow numerals 46.4px). The artwork bytes are frozen
   (52aff4d2 / 650b3fcc), so the correction is the display layer.
   Caps are DERIVED from the page's own type scale, not hand-tuned: width <= largest
   internal size in viewBox units -> flow 24.5 x H2, panel 18 x H2, floored to base-8.
   H2 is 26.9px at the 768 breakpoint and 32px from 1025 up, hence the two steps.
   Mobile (<768) is deliberately untouched — the artwork carries its own <600px branch
   inside the SVG and was signed off. Aspect ratio comes from the same box, so the
   reserved space shrinks in step and nothing shifts on load. */
@media (min-width: 768px) {
	.wfhero-viz.wfhero-viz--svc-flow .wfviz-box { max-width: 656px; }
	.wfhero-viz.wfhero-viz--svc-panel .wfviz-box { max-width: 472px; margin-left: 173px; }
}
@media (min-width: 1025px) {
	.wfhero-viz.wfhero-viz--svc-flow .wfviz-box { max-width: 784px; }
	.wfhero-viz.wfhero-viz--svc-panel .wfviz-box { max-width: 560px; margin-left: 206px; }
}
/* Panel margin-left (2026-08-05): ONE ANCHORING RULE for the dashboard composition —
   the source chips anchor the page rail; everything downstream (the flow's timeline and
   Sealed line, then the panel's cards and Reconciled table) shares the pipeline column's
   left edge. Measured before the fix: timeline and Sealed at rail+225/226 while cards and
   table hugged rail+17..20 — two anchors, which is what read as misalignment. The offset
   is DERIVED from artwork geometry, never eyeballed:
     offset = flowWidth x (310/1080)  -  panelWidth x (24/720)
   (310u = the timeline's start in the flow viewBox; 24u = the cards' inset in the panel
   viewBox) -> 206px at the 784/560 step, 173px at the 656/472 step. Mobile (<768) frozen. */

/* Contact page, phones only (2026-08-05): the chat launcher is HIDDEN. Measured: with a
   full-width form on a <=440px viewport, the fixed launcher rests ON the message textarea
   (52px overlap at 390) at rest — a widget sitting on the field a prospect types into. No
   fixed position clears a full-width form at every scroll rest, so the page's own richer
   conversion mechanism wins on phones; desktop keeps chat (measured clear at 1280).
   Specificity (1,1,1) beats the launcher's #wfchat-launcher.is-shown (1,1,0) without
   !important, independent of load order. */
@media (max-width: 767px) {
	body.page-id-30 #wfchat-launcher { display: none; }
}

/* ---------- Footer ---------- */
.wf-footer {
	border-top: 1px solid var(--wf-line);
	/* 48px -> 16px, spacing pass 2026-08-04. The pre-footer whitespace was FOUR sources
	   stacked: the last section's kit padding-bottom (48, now 24) + the last paragraph's
	   own margin-bottom (~21) + THIS margin (was 48) + .wf-footer-inner's padding-top (28)
	   = ~139px of dead air between the last link and the footer text. No margin collapsing
	   is involved — the border-top on this element blocks it, and the section's
	   padding-bottom intervenes anyway. 16 keeps a deliberate sliver of page background
	   between a tinted CTA band's edge and the border line; the separation itself now
	   comes from the section padding, where the site-wide scale controls it. */
	margin-top: 16px;
}

.wf-footer-inner {
	max-width: calc(var(--wfl-content-max) + 2 * var(--wfl-gutter));
	margin: 0 auto;
	padding: 28px var(--wfl-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 0.9375rem;
}

/* Chat-launcher clearance (2026-08-05, chat page-scope pass). The fixed launcher occupies a
   bottom-right zone of ~80px (16-24px inset + 56px button); at full scroll the footer's
   right flex end sat under it — measured 10x20px on the support@ mail link at 1280 and a
   48x8px graze on the centered last row at 440. Reserve the zone in the FOOTER, never nudge
   the launcher: row layouts (>480px) keep the right corner clear; the centered mobile
   layout keeps its symmetry and reserves the height below the last row instead. */
.wf-footer-inner {
	padding-right: calc(var(--wfl-gutter) + 80px);
}
@media (max-width: 480px) {
	.wf-footer-inner {
		padding-right: var(--wfl-gutter);
		padding-bottom: 76px;
	}
}

.wf-footer p {
	margin: 0;
}

.wf-footer a {
	color: var(--wf-azure);
	text-decoration: none;
	border-bottom: 1px solid var(--wf-line);
}

.wf-footer a:hover,
.wf-footer a:focus {
	border-bottom-color: var(--wf-azure);
}

@media (max-width: 480px) {
	.wf-header-inner,
	.wf-footer-inner {
		justify-content: center;
	}
}

/* ---------- Footer nav (U5): three-zone row ≥768, stacked centered below.
   The footer menu reuses .wf-nav (44px targets + aria-current styling come
   free); these overrides undo the two header-specific behaviors only. */
.wf-footer .wf-nav a {
	color: var(--wf-navy);
	border-bottom: none; /* .wf-footer a's underline treatment is for the mail link */
}

.wf-footer .wf-nav a:hover,
.wf-footer .wf-nav a:focus {
	color: var(--wf-azure);
	border-bottom: none;
}

@media (min-width: 1025px) {
	.wf-footer .wf-nav .wf-menu {
		justify-content: center; /* header right-aligns; footer center zone centers */
	}
}

@media (max-width: 767px) {
	.wf-footer-inner {
		flex-direction: column;
		justify-content: center;
	}
}

/* ---------- How-it-works steps (U6) ----------
   Native <ol> = real sequence semantics (list + "n of 3" announced per item).
   list-style:none strips list semantics in WebKit, so the markup carries an
   explicit role="list" to restore them (documented Scott O'Hara fix). The
   numerals are CSS counters — presentation; position is the announced order. */
ol.wf-steps {
	list-style: none;
	counter-reset: wf-step;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

ol.wf-steps li {
	counter-increment: wf-step;
}

ol.wf-steps li::before {
	content: counter(wf-step);
	display: block;
	font-family: var(--wf-font-heading);
	font-weight: 700;
	font-size: 2rem;
	line-height: var(--wf-leading-heading);
	color: var(--wf-azure);
	margin-bottom: 8px;
}

ol.wf-steps li strong {
	font-family: var(--wf-font-heading);
	font-weight: 600;
	color: var(--wf-navy);
}

@media (min-width: 768px) {
	ol.wf-steps {
		flex-direction: row;
	}

	ol.wf-steps li {
		flex: 1 1 0;
	}
}

/* ---------- Elementor CTA button (the site's one button, U4/U5) ----------
   Hover = one token step darker (consumes var, never defines brand — §11.3);
   short ease, color-only (CLS-neutral). focus-visible gets its OWN indicator
   (navy outline, no darkening) so keyboard state reads distinct from hover.
   Extra classes outrank the kit/post-CSS element rule (A9 load-order pattern). */
.elementor .elementor-element .elementor-widget-button .elementor-button {
	transition: background-color 160ms ease;
}

.elementor .elementor-element .elementor-widget-button .elementor-button:hover {
	background-color: var(--wf-azure-hover);
}

.elementor .elementor-element .elementor-widget-button .elementor-button:focus-visible {
	outline: 3px solid var(--wf-navy);
	outline-offset: 2px;
}