@webikon/webentor-core 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Webentor Core Changelog
 
+## 0.11.0
+
+- Add responsive spacing settings for WP Core blocks (`core/paragraph`, `core/heading`) — spacing panel appears automatically, classes rendered on frontend via `WP_HTML_Tag_Processor`
+  - Filterable block list: JS `webentor.core.wpCoreBlocksWithSpacing`, PHP `webentor/wp_core_blocks_with_spacing`
+  - Native WP spacing controls disabled on affected blocks to avoid duplication
+- Fix React hooks warning ("Do not call Hooks inside useEffect") caused by `generateClassNames` being called outside React component context via `blocks.getSaveContent.extraProps`
+- Fix WP Core blocks breaking after save/refresh — `classNameGenerator` no longer injects responsive classes into saved markup, preventing block validation failures on static blocks
+- Fix `l-section` responsive settings not splitting classes between wrapper and inner container in editor (layout/flexbox/grid classes now correctly apply to the inner container, matching frontend behavior)
+- Add `WebentorCoreServiceProvider` — Acorn auto-discovered service provider for webentor-core
+  - Blade directives (`@sliderContent`, `@enqueueScripts`, `@xdebugBreak`) moved from theme to core
+  - View Components (`Button`, `Slider`) moved from theme to core — themes can override by extending `Webentor\Core\View\Components\Button` etc.
+  - Core block `data.php` files now loaded by the service provider instead of `ThemeServiceProvider`
+
+## 0.10.1
+
+- Fix `l-section` inner z-index
+
 ## 0.10.0
 
 - Refactor responsive settings and improve UX

package/core-js/blocks-filters/responsive-settings/AGENTS.md

@@ -107,7 +107,9 @@ Key methods:
    - Each panel queries registry and renders SettingsComponents
 
 3. **Class generation** (`generateClassNames` in `utils.ts`):
-   - Called by `registerBlockExtension` classNameGenerator hook
+   - Called via a dedicated `editor.BlockListBlock` HOC (not via `registerBlockExtension`'s
+     `classNameGenerator`, which is no-oped to prevent classes leaking into saved markup
+     and React hooks being called outside component context)
    - Collects breakpoints from all attribute values
    - Calls each module's `generateClasses(attributes, breakpoint, context)` per breakpoint
    - Concatenates results

package/core-js/blocks-filters/responsive-settings/index.tsx

@@ -16,6 +16,7 @@
 import { registerBlockExtension } from '@10up/block-components';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { Fragment } from '@wordpress/element';
 import { addFilter, applyFilters } from '@wordpress/hooks';
 
@@ -45,6 +46,43 @@ import './settings/sizing';
 import './settings/spacing';
 
 const initResponsiveSettings = () => {
+  /**
+   * WP Core block spacing support injection.
+   * Injects `supports.webentor.spacing` into configured WP Core blocks so the
+   * responsive spacing panel appears automatically. Runs at priority 5,
+   * before the attribute-merging filter at priority 10.
+   *
+   * The block list is filterable via `webentor.core.wpCoreBlocksWithSpacing`.
+   */
+  addFilter(
+    'blocks.registerBlockType',
+    'webentor/core/injectWpCoreBlockSpacingSupport',
+    (settings, name) => {
+      const wpCoreBlocks = applyFilters(
+        'webentor.core.wpCoreBlocksWithSpacing',
+        ['core/paragraph', 'core/heading'],
+      ) as string[];
+
+      if (!wpCoreBlocks.includes(name)) return settings;
+
+      settings.supports = {
+        ...settings.supports,
+        webentor: {
+          ...settings.supports?.webentor,
+          spacing: true,
+        },
+        spacing: {
+          ...settings.supports?.spacing,
+          padding: false,
+          margin: false,
+        },
+      };
+
+      return settings;
+    },
+    5,
+  );
+
   /**
    * Attribute registration filter.
    * Iterates over all registered setting modules and merges their
@@ -89,10 +127,46 @@ const initResponsiveSettings = () => {
     extensionName: 'webentor.core.addResponsiveSettings',
     attributes: {},
     inlineStyleGenerator,
-    classNameGenerator: generateClassNames,
+    // No-op: prevents @10up/block-components from injecting responsive classes
+    // into saved markup via blocks.getSaveContent.extraProps, which breaks
+    // static core blocks (core/paragraph, core/heading) and triggers React
+    // hooks warnings (generateClassNames uses hooks but the save filter
+    // calls it outside React component context).
+    classNameGenerator: () => '',
     order: 'after',
     Edit: BlockEdit,
   });
+
+  /**
+   * Editor-only responsive classes via editor.BlockListBlock.
+   * Replaces the @10up classNameGenerator approach so that:
+   * 1. Hooks (useBlockProps, useBlockParent) are called in component context
+   * 2. Classes are only applied in the editor, not injected into saved HTML
+   */
+  const addResponsiveClassesHOC = createHigherOrderComponent(
+    (BlockListBlock) => (props) => {
+      const { attributes, className = '' } = props;
+      const responsiveClasses = generateClassNames(attributes);
+
+      if (!responsiveClasses) {
+        return <BlockListBlock {...props} />;
+      }
+
+      return (
+        <BlockListBlock
+          {...props}
+          className={`${className} ${responsiveClasses}`.trim()}
+        />
+      );
+    },
+    'addResponsiveClasses',
+  );
+
+  addFilter(
+    'editor.BlockListBlock',
+    'webentor/core/addResponsiveClasses',
+    addResponsiveClassesHOC,
+  );
 };
 
 /**

package/core-js/blocks-filters/responsive-settings/utils.ts

@@ -142,26 +142,32 @@ export const applyResponsiveSettings = (attributes: any): boolean => {
 };
 
 /**
- * Generates Tailwind class names from block attributes using the SettingsRegistry.
- * Each registered setting's generateClasses() is called per breakpoint.
+ * Pure class generator. Walks the SettingsRegistry and runs each supported
+ * module's generateClasses() per breakpoint, grouping the results by
+ * SettingDefinition.attributeKey (e.g. 'layout', 'flexbox', 'grid', 'spacing').
+ *
+ * Mirrors the PHP classes_by_property map. Hook-free — caller passes
+ * blockName and parentBlockAttributes explicitly so this can be used from
+ * any component without duplicating useBlockProps / useBlockParent calls.
  *
- * This function is called as a classNameGenerator hook from registerBlockExtension.
- * useBlockParent/useBlockProps are called at top level to comply with Rules of Hooks.
+ * Consumers that need to split classes between different DOM elements
+ * (e.g. l-section puts flexbox/grid/layout.display on an inner container)
+ * can call this helper and pick the entries they want per element.
  */
-export const generateClassNames = (attributes: any): string => {
+export const computeClassesByAttribute = (
+  attributes: Record<string, any>,
+  blockName: string,
+  parentBlockAttributes?: Record<string, any>,
+): Record<string, string[]> => {
+  const result: Record<string, string[]> = {};
+
   if (!applyResponsiveSettings(attributes)) {
-    return '';
+    return result;
   }
 
-  const blockProps = useBlockProps();
-  const blockName = blockProps['data-type'];
   const blockSettings = getBlockType(blockName);
   const supports = blockSettings?.supports;
 
-  // useBlockParent hoisted to top level (hook-safe)
-  const parentBlock = useBlockParent();
-
-  // Resolve ordered breakpoints for cascade logic
   const orderedBreakpoints: string[] = applyFilters(
     'webentor.core.twBreakpoints',
     ['basic'],
@@ -170,11 +176,10 @@ export const generateClassNames = (attributes: any): string => {
   const context: ClassGenContext = {
     blockName,
     supports,
-    parentBlockAttributes: parentBlock?.attributes,
+    parentBlockAttributes,
     breakpoints: orderedBreakpoints,
   };
 
-  const classes: string[] = [];
   const allSettings = registry.getAll();
 
   // Collect all breakpoints present in any attribute
@@ -182,7 +187,6 @@ export const generateClassNames = (attributes: any): string => {
   for (const def of allSettings) {
     if (!registry.isSupported(supports, def)) continue;
 
-    // Check all attribute keys declared by this module
     for (const attrKey of Object.keys(def.attributeSchema)) {
       const attrGroup = attributes[attrKey];
       if (!attrGroup || typeof attrGroup !== 'object') continue;
@@ -198,15 +202,90 @@ export const generateClassNames = (attributes: any): string => {
     }
   }
 
-  // Generate classes per breakpoint per registered setting
+  // Generate classes per breakpoint per registered setting, grouped by attributeKey
   for (const bp of breakpoints) {
     for (const def of allSettings) {
       if (!registry.isSupported(supports, def)) continue;
-      classes.push(...def.generateClasses(attributes, bp, context));
+      const produced = def.generateClasses(attributes, bp, context);
+      if (produced.length === 0) continue;
+      const key = def.attributeKey;
+      if (!result[key]) result[key] = [];
+      result[key].push(...produced);
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Generates Tailwind class names from block attributes using the SettingsRegistry.
+ * Each registered setting's generateClasses() is called per breakpoint.
+ *
+ * Called from the editor.BlockListBlock HOC (React component context).
+ * Hooks are called unconditionally before any early returns (Rules of Hooks).
+ *
+ * Delegates the per-module work to computeClassesByAttribute and flattens the
+ * result, preserving the original output shape (a single space-joined string).
+ */
+export const generateClassNames = (attributes: any): string => {
+  // Hooks must be called unconditionally before any early return (Rules of Hooks)
+  const blockProps = useBlockProps();
+  const parentBlock = useBlockParent();
+
+  if (!applyResponsiveSettings(attributes)) {
+    return '';
+  }
+
+  const blockName = blockProps['data-type'];
+
+  const classesByAttribute = computeClassesByAttribute(
+    attributes,
+    blockName,
+    parentBlock?.attributes,
+  );
+
+  return Object.values(classesByAttribute).flat().join(' ');
+};
+
+/**
+ * Collect Tailwind class tokens from responsive setting attributes.
+ *
+ * Reads value entries from the given attribute keys (e.g. 'layout', 'flexbox',
+ * 'grid') and returns the set of class tokens that would be generated.
+ * Works directly from the block's attributes — no registry or cross-bundle
+ * state needed.
+ *
+ * Useful for blocks that need to split classes between elements (e.g. l-section
+ * moves layout/flexbox/grid classes from the wrapper to an inner container).
+ */
+export const collectClassTokensFromAttributes = (
+  attributes: Record<string, any>,
+  attributeKeys: string[],
+): Set<string> => {
+  const tokens = new Set<string>();
+
+  for (const attrKey of attributeKeys) {
+    const attrGroup = attributes[attrKey];
+    if (!attrGroup || typeof attrGroup !== 'object') continue;
+
+    for (const prop of Object.values(attrGroup)) {
+      const propData = prop as any;
+      if (!propData?.value) continue;
+
+      for (const [bp, value] of Object.entries(propData.value)) {
+        if (!value || typeof value !== 'string') continue;
+        const prefix = bp === 'basic' ? '' : `${bp}:`;
+        tokens.add(`${prefix}${value}`);
+
+        // Layout 'hidden' maps to 'opacity-30' in editor
+        if (value === 'hidden') {
+          tokens.add(`${prefix}opacity-30`);
+        }
+      }
     }
   }
 
-  return classes.join(' ') ?? '';
+  return tokens;
 };
 
 export const inlineStyleGenerator = (): Record<string, any> => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webikon/webentor-core",
   "homepage": "https://webikon.sk",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Core functionality and useful utilities for Webentor Stack",
   "license": "MIT",
   "author": "Webikon s.r.o.",

package/public/build/assets/coreAppStyles-CukxHLz7.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--wbtr-color-gray-50:oklch(98.5% .002 247.839);--wbtr-color-gray-100:oklch(96.7% .003 264.542);--wbtr-color-gray-200:oklch(92.8% .006 264.531);--wbtr-color-gray-300:oklch(87.2% .01 258.338);--wbtr-color-gray-500:oklch(55.1% .027 264.364);--wbtr-color-gray-700:oklch(37.3% .034 259.733);--wbtr-color-gray-800:oklch(27.8% .033 256.848);--wbtr-color-black:#000;--wbtr-color-white:#fff;--wbtr-spacing:.25rem;--wbtr-font-weight-semibold:600;--wbtr-font-weight-bold:700;--wbtr-ease-in:cubic-bezier(.4,0,1,1);--wbtr-ease-in-out:cubic-bezier(.4,0,.2,1);--wbtr-default-transition-duration:.15s;--wbtr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--wbtr-default-font-family:var(--font-primary);--wbtr-default-mono-font-family:var(--wbtr-font-mono);--wbtr-font-heading:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--wbtr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--wbtr-leading-125:1.25;--wbtr-leading-150:1.5;--wbtr-text-10:.625rem;--wbtr-text-12:.75rem;--wbtr-text-14:.875rem;--wbtr-text-16:1rem;--wbtr-text-18:1.125rem;--wbtr-text-20:1.25rem;--wbtr-text-24:1.5rem;--wbtr-text-30:1.875rem;--wbtr-text-80:5rem;--wbtr-color-editor-border:#ddd;--wbtr-radius-full:9999px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--wbtr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--wbtr-default-font-feature-settings,normal);font-variation-settings:var(--wbtr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--wbtr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--wbtr-default-mono-font-feature-settings,normal);font-variation-settings:var(--wbtr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:1.25rem}::file-selector-button{margin-inline-end:.25rem}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{scroll-behavior:smooth;font-family:var(--font-primary)}@media screen and (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}a,button,label{transition:color .15s ease-out,background-color .15s ease-out,opacity .15s ease-out,border-color .15s ease-out}svg{transition:fill .15s ease-out,stroke .15s ease-out}}@layer components;@layer utilities{.wbtr\:pointer-events-none{pointer-events:none}.wbtr\:absolute{position:absolute}.wbtr\:relative{position:relative}.wbtr\:inset-0{inset:calc(var(--wbtr-spacing)*0)}.wbtr\:-top-1{top:calc(var(--wbtr-spacing)*-1)}.wbtr\:top-0{top:calc(var(--wbtr-spacing)*0)}.wbtr\:top-1\/2{top:50%}.wbtr\:top-\[2px\]{top:2px}.wbtr\:-right-1{right:calc(var(--wbtr-spacing)*-1)}.wbtr\:-right-4{right:calc(var(--wbtr-spacing)*-4)}.wbtr\:right-3{right:calc(var(--wbtr-spacing)*3)}.wbtr\:right-4{right:calc(var(--wbtr-spacing)*4)}.wbtr\:bottom-0{bottom:calc(var(--wbtr-spacing)*0)}.wbtr\:bottom-10{bottom:calc(var(--wbtr-spacing)*10)}.wbtr\:left-0{left:calc(var(--wbtr-spacing)*0)}.wbtr\:left-2{left:calc(var(--wbtr-spacing)*2)}.wbtr\:left-3{left:calc(var(--wbtr-spacing)*3)}.wbtr\:z-10{z-index:10}.wbtr\:z-50{z-index:50}.wbtr\:z-\[-1\]{z-index:-1}.wbtr\:z-\[1\]{z-index:1}.wbtr\:z-\[2\]{z-index:2}.wbtr\:my-2{margin-block:calc(var(--wbtr-spacing)*2)}.wbtr\:my-20{margin-block:calc(var(--wbtr-spacing)*20)}.wbtr\:mt-0{margin-top:calc(var(--wbtr-spacing)*0)}.wbtr\:mt-2{margin-top:calc(var(--wbtr-spacing)*2)}.wbtr\:mt-4{margin-top:calc(var(--wbtr-spacing)*4)}.wbtr\:mt-5{margin-top:calc(var(--wbtr-spacing)*5)}.wbtr\:mt-7{margin-top:calc(var(--wbtr-spacing)*7)}.wbtr\:mb-0\!{margin-bottom:calc(var(--wbtr-spacing)*0)!important}.wbtr\:mb-1{margin-bottom:calc(var(--wbtr-spacing)*1)}.wbtr\:mb-2{margin-bottom:calc(var(--wbtr-spacing)*2)}.wbtr\:mb-2\!{margin-bottom:calc(var(--wbtr-spacing)*2)!important}.wbtr\:mb-3{margin-bottom:calc(var(--wbtr-spacing)*3)}.wbtr\:mb-4{margin-bottom:calc(var(--wbtr-spacing)*4)}.wbtr\:ml-auto{margin-left:auto}.wbtr\:block{display:block}.wbtr\:flex{display:flex}.wbtr\:hidden{display:none}.wbtr\:inline-block{display:inline-block}.wbtr\:size-10{width:calc(var(--wbtr-spacing)*10);height:calc(var(--wbtr-spacing)*10)}.wbtr\:\!h-full{height:100%!important}.wbtr\:h-4{height:calc(var(--wbtr-spacing)*4)}.wbtr\:h-5{height:calc(var(--wbtr-spacing)*5)}.wbtr\:h-11{height:calc(var(--wbtr-spacing)*11)}.wbtr\:h-12{height:calc(var(--wbtr-spacing)*12)}.wbtr\:h-\[215px\]{height:215px}.wbtr\:h-fit\!{height:fit-content!important}.wbtr\:h-full{height:100%}.wbtr\:\!w-full{width:100%!important}.wbtr\:w-4{width:calc(var(--wbtr-spacing)*4)}.wbtr\:w-5{width:calc(var(--wbtr-spacing)*5)}.wbtr\:w-6{width:calc(var(--wbtr-spacing)*6)}.wbtr\:w-12{width:calc(var(--wbtr-spacing)*12)}.wbtr\:w-24{width:calc(var(--wbtr-spacing)*24)}.wbtr\:w-\[320px\]{width:320px}.wbtr\:w-auto{width:auto}.wbtr\:w-fit\!{width:fit-content!important}.wbtr\:w-full{width:100%}.wbtr\:max-w-full{max-width:100%}.wbtr\:min-w-0{min-width:calc(var(--wbtr-spacing)*0)}.wbtr\:flex-1{flex:1}.wbtr\:grow-1{flex-grow:1}.wbtr\:translate-x-0{--tw-translate-x:calc(var(--wbtr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.wbtr\:translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.wbtr\:-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.wbtr\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.wbtr\:rotate-90{rotate:90deg}.wbtr\:transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.wbtr\:flex-col{flex-direction:column}.wbtr\:flex-row{flex-direction:row}.wbtr\:flex-wrap{flex-wrap:wrap}.wbtr\:items-center{align-items:center}.wbtr\:items-start{align-items:flex-start}.wbtr\:justify-between{justify-content:space-between}.wbtr\:justify-center{justify-content:center}.wbtr\:justify-start{justify-content:flex-start}.wbtr\:gap-1\.5{gap:calc(var(--wbtr-spacing)*1.5)}.wbtr\:gap-2{gap:calc(var(--wbtr-spacing)*2)}.wbtr\:gap-3{gap:calc(var(--wbtr-spacing)*3)}.wbtr\:gap-4{gap:calc(var(--wbtr-spacing)*4)}.wbtr\:gap-8{gap:calc(var(--wbtr-spacing)*8)}.wbtr\:gap-x-4{column-gap:calc(var(--wbtr-spacing)*4)}.wbtr\:overflow-hidden{overflow:hidden}.wbtr\:rounded-\[inherit\]{border-radius:inherit}.wbtr\:rounded-full{border-radius:var(--wbtr-radius-full)}.wbtr\:border{border-style:var(--tw-border-style);border-width:1px}.wbtr\:border-2{border-style:var(--tw-border-style);border-width:2px}.wbtr\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.wbtr\:border-dashed{--tw-border-style:dashed;border-style:dashed}.wbtr\:border-black{border-color:var(--wbtr-color-black)}.wbtr\:border-editor-border{border-color:var(--wbtr-color-editor-border)}.wbtr\:border-gray-100{border-color:var(--wbtr-color-gray-100)}.wbtr\:border-gray-200{border-color:var(--wbtr-color-gray-200)}.wbtr\:bg-black{background-color:var(--wbtr-color-black)}.wbtr\:bg-editor-border{background-color:var(--wbtr-color-editor-border)}.wbtr\:bg-gray-50{background-color:var(--wbtr-color-gray-50)}.wbtr\:bg-gray-100{background-color:var(--wbtr-color-gray-100)}.wbtr\:bg-gray-800{background-color:var(--wbtr-color-gray-800)}.wbtr\:bg-white{background-color:var(--wbtr-color-white)}.wbtr\:fill-current{fill:currentColor}.wbtr\:object-cover{object-fit:cover}.wbtr\:p-0\!{padding:calc(var(--wbtr-spacing)*0)!important}.wbtr\:p-2{padding:calc(var(--wbtr-spacing)*2)}.wbtr\:p-3{padding:calc(var(--wbtr-spacing)*3)}.wbtr\:p-4{padding:calc(var(--wbtr-spacing)*4)}.wbtr\:p-5{padding:calc(var(--wbtr-spacing)*5)}.wbtr\:p-8{padding:calc(var(--wbtr-spacing)*8)}.wbtr\:px-2{padding-inline:calc(var(--wbtr-spacing)*2)}.wbtr\:px-4{padding-inline:calc(var(--wbtr-spacing)*4)}.wbtr\:py-2\.5{padding-block:calc(var(--wbtr-spacing)*2.5)}.wbtr\:py-4{padding-block:calc(var(--wbtr-spacing)*4)}.wbtr\:pt-3{padding-top:calc(var(--wbtr-spacing)*3)}.wbtr\:pt-4{padding-top:calc(var(--wbtr-spacing)*4)}.wbtr\:pt-5{padding-top:calc(var(--wbtr-spacing)*5)}.wbtr\:pr-2{padding-right:calc(var(--wbtr-spacing)*2)}.wbtr\:pr-12{padding-right:calc(var(--wbtr-spacing)*12)}.wbtr\:pb-2{padding-bottom:calc(var(--wbtr-spacing)*2)}.wbtr\:pb-4{padding-bottom:calc(var(--wbtr-spacing)*4)}.wbtr\:pl-5{padding-left:calc(var(--wbtr-spacing)*5)}.wbtr\:text-center{text-align:center}.wbtr\:text-left{text-align:left}.wbtr\:align-middle{vertical-align:middle}.wbtr\:font-heading{font-family:var(--wbtr-font-heading)}.wbtr\:text-10{font-size:var(--wbtr-text-10)}.wbtr\:text-12{font-size:var(--wbtr-text-12)}.wbtr\:text-14{font-size:var(--wbtr-text-14)}.wbtr\:text-16{font-size:var(--wbtr-text-16)}.wbtr\:text-18{font-size:var(--wbtr-text-18)}.wbtr\:text-20{font-size:var(--wbtr-text-20)}.wbtr\:text-24{font-size:var(--wbtr-text-24)}.wbtr\:text-30{font-size:var(--wbtr-text-30)}.wbtr\:text-80{font-size:var(--wbtr-text-80)}.wbtr\:text-\[11px\]{font-size:.6875rem}.wbtr\:leading-125{--tw-leading:var(--wbtr-leading-125);line-height:var(--wbtr-leading-125)}.wbtr\:leading-150{--tw-leading:var(--wbtr-leading-150);line-height:var(--wbtr-leading-150)}.wbtr\:font-bold\!{--tw-font-weight:var(--wbtr-font-weight-bold)!important;font-weight:var(--wbtr-font-weight-bold)!important}.wbtr\:font-semibold{--tw-font-weight:var(--wbtr-font-weight-semibold);font-weight:var(--wbtr-font-weight-semibold)}.wbtr\:text-black{color:var(--wbtr-color-black)}.wbtr\:text-current{color:currentColor}.wbtr\:text-gray-200{color:var(--wbtr-color-gray-200)}.wbtr\:text-gray-300{color:var(--wbtr-color-gray-300)}.wbtr\:text-gray-500{color:var(--wbtr-color-gray-500)}.wbtr\:text-gray-700{color:var(--wbtr-color-gray-700)}.wbtr\:text-gray-800{color:var(--wbtr-color-gray-800)}.wbtr\:text-white{color:var(--wbtr-color-white)}.wbtr\:uppercase{text-transform:uppercase}.wbtr\:opacity-0{opacity:0}.wbtr\:opacity-20{opacity:.2}.wbtr\:opacity-40{opacity:.4}.wbtr\:opacity-50{opacity:.5}.wbtr\:opacity-80{opacity:.8}.wbtr\:opacity-100{opacity:1}.wbtr\:shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.wbtr\:transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--wbtr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--wbtr-default-transition-duration))}.wbtr\:duration-500{--tw-duration:.5s;transition-duration:.5s}.wbtr\:ease-in{--tw-ease:var(--wbtr-ease-in);transition-timing-function:var(--wbtr-ease-in)}.wbtr\:ease-in-out{--tw-ease:var(--wbtr-ease-in-out);transition-timing-function:var(--wbtr-ease-in-out)}.wbtr\:outline-none{--tw-outline-style:none;outline-style:none}.wbtr\:group-\[\.slider-enabled\]\:flex:is(:where(.wbtr\:group).slider-enabled *){display:flex}@media(hover:hover){.wbtr\:hover\:underline:hover{text-decoration-line:underline}}@media(min-width:48rem){.wbtr\:md\:block{display:block}.wbtr\:md\:hidden{display:none}}}.bg-image-underlay{position:relative}.bg-image-underlay:before{background-color:var(--color-gray-900);opacity:.2;content:"";display:block;position:absolute;inset:0}.bg-image-underlay>*{z-index:1}.tabs-navigation ul{margin-left:0;list-style:none}[x-cloak]{display:none!important}[aria-busy=true]{cursor:wait;pointer-events:none;opacity:.7}.loader{border:5px solid var(--color-white);border-bottom-color:var(--color-primary);box-sizing:border-box;border-radius:50%;width:24px;height:24px;animation:1s linear infinite rotation;display:inline-block}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.alignnone{margin:.3125rem 1.25rem 1.25rem 0}.aligncenter,div.aligncenter{margin:.3125rem auto;display:block}.alignright{float:right;margin:.3125rem 0 1.25rem 1.25rem}.alignleft{float:left;margin:.3125rem 1.25rem 1.25rem 0}a img.alignright{float:right;margin:.3125rem 0 1.25rem 1.25rem}a img.alignnone{margin:.3125rem 1.25rem 1.25rem 0}a img.alignleft{float:left;margin:.3125rem 1.25rem 1.25rem 0}a img.aligncenter{margin-left:auto;margin-right:auto;display:block}.wp-caption{text-align:center;background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:.3125rem .1875rem .625rem}.wp-caption.alignnone,.wp-caption.alignleft{margin:.3125rem 1.25rem 1.25rem 0}.wp-caption.alignright{margin:.3125rem 0 1.25rem 1.25rem}.wp-caption img{border:0;width:auto;max-width:98.5%;height:auto;margin:0;padding:0}.wp-caption p.wp-caption-text{margin:0;padding:0 .25rem .3125rem;font-size:.6875rem;line-height:1.0625rem}.screen-reader-text{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-.0625rem;padding:0;overflow:hidden;word-wrap:normal!important;position:absolute!important}.screen-reader-text:focus{clip-path:none;color:#444;z-index:100000;background-color:#eee;width:auto;height:auto;padding:.9375rem 1.4375rem .875rem;font-size:1em;line-height:normal;text-decoration:none;display:block;top:5px;left:5px;clip:auto!important}:root{--form-field-label-color:#000;--form-field-label-font-size:16px;--form-field-input-border:#000;--form-field-input-background:#fff;--form-field-placeholder-color:#000;--form-field-font-size:16px;--form-confirmation-message-color:green;--form-validation-error-color:red}.gform_wrapper.gform-theme{align-self:center;width:100%}.gform_wrapper.gform-theme .gfield{padding:.25rem 0}.gform_wrapper.gform-theme .gform_fields{row-gap:8px}.gform_wrapper.gform-theme .gform_heading{display:none}.gform_wrapper.gform-theme .gform_validation_errors,.gform_wrapper.gform-theme .gform_submission_error{border:none;outline:none;font-size:1.125rem}.gform_wrapper.gform-theme .gfield_label{color:var(--form-field-label-color);font-size:var(--form-field-label-font-size);margin-bottom:.25rem;font-weight:400}.gform_wrapper.gform-theme input,.gform_wrapper.gform-theme textarea{border:2px solid var(--form-field-input-border);background-color:var(--form-field-input-background);font-size:var(--form-field-font-size);border-radius:0;padding:1rem;line-height:1.5}:is(.gform_wrapper.gform-theme input,.gform_wrapper.gform-theme textarea)::placeholder{color:var(--form-field-placeholder-color)}.gform_wrapper.gform-theme .gform_footer{justify-content:left;margin-top:1.25rem}.gform_wrapper.gform-theme .gform_confirmation_message{color:var(--form-confirmation-message-color)}.gform_wrapper.gform-theme .gfield_required>span,.gform_wrapper.gform-theme .gfield_description.validation_message,.gform_wrapper.gform-theme .gform_submission_error,.gform_wrapper.gform-theme .gform_validation_errors .gform-icon{color:var(--form-validation-error-color)}.gform_wrapper.gform-theme .gform_validation_errors,.gform_wrapper.gform-theme .gform_validation_errors .gform-icon{border-color:var(--form-validation-error-color);background-color:#0000}.gform_wrapper.gform-theme .gfield_visibility_hidden{visibility:hidden;position:absolute;left:-9999px}:root{--wbtr-table-row-border-width:1px;--wbtr-table-row-border-color:#e5e5e5}.table-scroll-shadow.has-scroll{position:relative}.table-scroll-shadow.has-scroll:after{content:"";z-index:1;pointer-events:none;background-image:linear-gradient(270deg,var(--color-white)0%,#fff0 100%);width:16px;height:100%;position:absolute;top:0;right:0}@media(min-width:30rem){.table-scroll-shadow.has-scroll:after{width:24px}}@media(min-width:48rem){.table-scroll-shadow.has-scroll:after{width:36px}}@media(min-width:64rem){.table-scroll-shadow.has-scroll:after{width:48px}}.table,.wp-block-table{width:100%;display:block;position:relative;overflow-x:auto}:is(.table,.wp-block-table) table{width:100%;font-family:var(--font-primary);text-align:left}:is(.table,.wp-block-table) thead{border-bottom:none}:is(.table,.wp-block-table) th,:is(.table,.wp-block-table) td{border:none;border-bottom:var(--wbtr-table-row-border-width)solid var(--wbtr-table-row-border-color);max-width:200px;padding-right:1rem}@media(min-width:30rem){:is(.table,.wp-block-table) th,:is(.table,.wp-block-table) td{max-width:400px;padding-right:1.5rem}}@media(min-width:48rem){:is(.table,.wp-block-table) th,:is(.table,.wp-block-table) td{padding-right:2.25rem}}@media(min-width:64rem){:is(.table,.wp-block-table) th,:is(.table,.wp-block-table) td{padding-right:3rem}}:is(.table,.wp-block-table) th{font-size:1rem;font-weight:var(--font-weight-bold);padding-top:1.5rem;padding-bottom:1.5rem}@media(min-width:30rem){:is(.table,.wp-block-table) th{font-size:1.125rem}}:is(.table,.wp-block-table) td{padding-top:.75rem;padding-bottom:.75rem}:is(.table,.wp-block-table) table.has-fixed-layout{table-layout:fixed}:is(.table,.wp-block-table) table.has-fixed-layout th,:is(.table,.wp-block-table) table.has-fixed-layout td{white-space:normal}.header.is-sticky{z-index:50;transition:transform .2s ease-in-out;position:fixed;top:0;left:0;right:0}.admin-bar .header.is-sticky{padding-top:2rem}@media screen and (max-width:782px){.admin-bar .header.is-sticky{padding-top:2.875rem}}.wp-block-query-pagination{color:var(--color-primary);justify-content:center;font-size:1rem;display:flex;position:relative}.wp-block-query-pagination a:hover{text-decoration:underline}.wp-block-query-pagination .wp-block-query-pagination-previous{position:absolute;left:0}.wp-block-query-pagination .wp-block-query-pagination-next{position:absolute;right:0}.wp-block-query-pagination .page-numbers.current{color:var(--color-primary);font-size:1.125rem}.wp-block-query .wp-block-query-pagination>.wp-block-query-pagination-numbers,.wp-block-query .wp-block-query-pagination>.wp-block-query-pagination-previous,.wp-block-query .wp-block-query-pagination>.wp-block-query-pagination-next{margin:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}