From d0ad0e0ea02cbee55bcdb9a03fd4adde4043b09c Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Fri, 2 Jan 2026 11:23:45 -0500
Subject: [PATCH 1/6] add: style upgrade plan

---
 PLAN.md | 287 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 287 insertions(+)
 create mode 100644 PLAN.md

diff --git a/PLAN.md b/PLAN.md
new file mode 100644
index 0000000..2ecedbe
--- /dev/null
+++ b/PLAN.md
@@ -0,0 +1,287 @@
+# Priority Plus Navigation - theme.json Styling Integration
+
+## Overview
+
+Integrate theme.json support for Priority Plus Navigation styling, allowing users to customize dropdown menu appearance through their theme's theme.json file while maintaining plugin defaults.
+
+## Goals
+
+1. Enable theme.json-based styling for the Priority Plus dropdown menu
+2. Strip down existing CSS to bare necessities
+3. Set sensible plugin defaults that can be overridden via theme.json
+4. Prepare foundation for future UI-based controls
+
+**Note:** This is an unreleased product, so no backward compatibility considerations are needed.
+
+## Current State Analysis
+
+### Existing Styling (To Be Cleaned Up)
+
+**_variables.scss** - Button-specific CSS custom properties (KEEP - already working):
+- `--priority-plus-navigation--background`
+- `--priority-plus-navigation--background-hover`
+- `--priority-plus-navigation--color`
+- `--priority-plus-navigation--color-hover`
+- `--priority-plus-navigation--border-*`
+- `--priority-plus-navigation--font-*`
+- `--priority-plus-navigation--padding`
+
+**style.scss** - Hardcoded dropdown styles (NEEDS CLEANUP):
+- Lines 48-86: Dropdown container (background, border, border-radius, box-shadow, spacing)
+- Lines 76-86: Dropdown item links (padding, hover background)
+- Lines 106-108: Multi-level indentation (hardcoded 1rem)
+
+### Block Attributes (Already Implemented)
+
+Editor controls already exist for "More" button:
+- `priorityNavMoreLabel`
+- `priorityNavMoreIcon`
+- `priorityNavMoreBackgroundColor`
+- `priorityNavMoreBackgroundColorHover`
+- `priorityNavMoreTextColor`
+- `priorityNavMoreTextColorHover`
+- `priorityNavMorePadding`
+
+## Proposed theme.json Structure
+
+### Recommended WordPress Pattern
+
+According to WordPress documentation, custom settings use `settings.custom` which generates CSS custom properties with the `--wp--custom--` prefix. CamelCased keys are automatically converted to kebab-case.
+
+**Reference:** [Theme.json Version 3 Reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/)
+
+### Our Implementation
+
+Users will define settings in their theme's `theme.json`:
+
+```json
+{
+  "version": 3,
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "backgroundColor": "#ffffff",
+          "borderColor": "#ddd",
+          "borderWidth": "1px",
+          "borderRadius": "4px",
+          "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.15)",
+          "itemSpacing": "0.75rem 1rem",
+          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.05)",
+          "itemHoverTextColor": "inherit",
+          "multiLevelIndent": "1rem"
+        }
+      }
+    }
+  }
+}
+```
+
+### Generated CSS Custom Properties
+
+This generates the following CSS variables (automatically available):
+
+- `--wp--custom--priority-plus-navigation--dropdown--background-color`
+- `--wp--custom--priority-plus-navigation--dropdown--border-color`
+- `--wp--custom--priority-plus-navigation--dropdown--border-width`
+- `--wp--custom--priority-plus-navigation--dropdown--border-radius`
+- `--wp--custom--priority-plus-navigation--dropdown--box-shadow`
+- `--wp--custom--priority-plus-navigation--dropdown--item-spacing`
+- `--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color`
+- `--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color`
+- `--wp--custom--priority-plus-navigation--dropdown--multi-level-indent`
+
+## Implementation Plan
+
+### Phase 1: Create Plugin Default theme.json
+
+**File:** `/theme.json` (in plugin root)
+
+WordPress supports theme.json files in plugins (since WP 6.1). This file provides default values that themes can override.
+
+**Action:**
+1. Create `theme.json` in plugin root
+2. Define default values for Priority Plus dropdown styling
+3. Use sensible defaults that match current hardcoded styles
+
+**Reference:** Plugins can ship theme.json to provide defaults ([Global Settings & Styles Documentation](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/))
+
+### Phase 2: Refactor SCSS to Use CSS Custom Properties
+
+**File:** `src/styles/style.scss`
+
+**Actions:**
+
+1. **Strip down dropdown container styles** (lines 48-86)
+   - Remove hardcoded colors, borders, shadows, spacing
+   - Replace with CSS custom property references using `var()`
+   - Keep only structural/functional CSS (position, z-index, transitions, visibility)
+
+2. **Update dropdown item styles** (lines 76-86)
+   - Replace hardcoded padding with custom property
+   - Replace hardcoded hover background with custom property
+   - Add hover text color support
+
+3. **Update multi-level accordion indentation** (lines 106-108)
+   - Replace hardcoded `1rem` with custom property
+   - Use CSS custom property for flexible nesting levels
+
+**Example refactoring:**
+
+```scss
+// BEFORE (Hardcoded)
+.priority-plus-navigation-dropdown {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+// AFTER (CSS Custom Properties - no fallbacks needed)
+.priority-plus-navigation-dropdown {
+    background: var(--wp--custom--priority-plus-navigation--dropdown--background-color);
+    border-width: var(--wp--custom--priority-plus-navigation--dropdown--border-width);
+    border-style: solid;
+    border-color: var(--wp--custom--priority-plus-navigation--dropdown--border-color);
+    border-radius: var(--wp--custom--priority-plus-navigation--dropdown--border-radius);
+    box-shadow: var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);
+}
+```
+
+### Phase 3: Remove Unnecessary CSS
+
+**File:** `src/styles/style.scss`
+
+**Actions:**
+1. Identify and remove any extra spacing, radius, or decorative CSS not essential for core functionality
+2. Keep only:
+   - Positioning and layout (flexbox, absolute positioning)
+   - Visibility/display states (hidden, open)
+   - Transitions and transforms (animations)
+   - ARIA-related display rules
+   - Z-index and stacking context
+3. Move all visual styling to CSS custom properties
+
+### Phase 4: Documentation
+
+**Files:**
+- `README.md`
+- `docs/README.md` or new `docs/theme-json-styling.md`
+
+**Actions:**
+1. Document the new theme.json integration
+2. Provide example theme.json configuration
+3. List all available custom properties
+4. Explain the override hierarchy (plugin defaults → theme.json → block attributes for button)
+
+### Phase 5: Testing
+
+**Test Cases:**
+
+1. **Default behavior** (no theme.json customization)
+   - Dropdown displays with plugin default styles
+   - Verify all CSS custom properties render correctly
+
+2. **theme.json override**
+   - Create test theme.json with custom values
+   - Verify CSS custom properties are applied
+   - Test all properties individually
+
+3. **Multi-level navigation**
+   - Test multi-level indentation with custom values
+   - Verify nested accordions respect indentation setting
+
+4. **Block attribute priority** (More button)
+   - Verify More button block attributes still work
+   - Confirm button styling is independent of dropdown styling
+
+## File Changes Summary
+
+### New Files
+- `/theme.json` - Plugin default theme.json configuration
+
+### Modified Files
+- `src/styles/style.scss` - Refactor dropdown styles to use CSS custom properties
+- `src/styles/_variables.scss` - Keep as-is (More button variables)
+- `README.md` - Add theme.json documentation section
+- `docs/` - Add theme.json styling guide (optional)
+
+### No Changes Required
+- `src/variation/controls.js` - Block controls stay the same (More button only)
+- `classes/class-enqueues.php` - No changes needed (handles More button attributes)
+- All JavaScript files - No changes needed
+
+## CSS Custom Properties Reference
+
+### Plugin Defaults → theme.json Overrides
+
+| Property | Default Value | theme.json Path | CSS Variable |
+|----------|---------------|-----------------|--------------|
+| Dropdown Background | `#ffffff` | `settings.custom.priorityPlusNavigation.dropdown.backgroundColor` | `--wp--custom--priority-plus-navigation--dropdown--background-color` |
+| Dropdown Border Color | `#dddddd` | `settings.custom.priorityPlusNavigation.dropdown.borderColor` | `--wp--custom--priority-plus-navigation--dropdown--border-color` |
+| Dropdown Border Width | `1px` | `settings.custom.priorityPlusNavigation.dropdown.borderWidth` | `--wp--custom--priority-plus-navigation--dropdown--border-width` |
+| Dropdown Border Radius | `4px` | `settings.custom.priorityPlusNavigation.dropdown.borderRadius` | `--wp--custom--priority-plus-navigation--dropdown--border-radius` |
+| Dropdown Box Shadow | `0 4px 12px rgba(0, 0, 0, 0.15)` | `settings.custom.priorityPlusNavigation.dropdown.boxShadow` | `--wp--custom--priority-plus-navigation--dropdown--box-shadow` |
+| Item Padding | `0.75rem 1rem` | `settings.custom.priorityPlusNavigation.dropdown.itemSpacing` | `--wp--custom--priority-plus-navigation--dropdown--item-spacing` |
+| Item Hover Background | `rgba(0, 0, 0, 0.05)` | `settings.custom.priorityPlusNavigation.dropdown.itemHoverBackgroundColor` | `--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color` |
+| Item Hover Text Color | `inherit` | `settings.custom.priorityPlusNavigation.dropdown.itemHoverTextColor` | `--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color` |
+| Multi-level Indent | `1rem` | `settings.custom.priorityPlusNavigation.dropdown.multiLevelIndent` | `--wp--custom--priority-plus-navigation--dropdown--multi-level-indent` |
+
+## Benefits of This Approach
+
+1. **Standards-compliant** - Uses WordPress recommended theme.json pattern
+2. **Flexible** - Theme builders can override only what they need
+3. **Future-proof** - Easy to add UI controls later (read from theme.json, write to block attributes)
+4. **Maintainable** - Separates concerns (plugin defaults vs. theme customization)
+5. **Developer-friendly** - Clear, documented CSS custom properties
+6. **Clean architecture** - No legacy code or backward compatibility hacks
+
+## Usage for Theme Builders
+
+Theme builders can customize the Priority Plus Navigation dropdown by adding settings to their theme's `theme.json`:
+
+```json
+{
+  "version": 3,
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "backgroundColor": "#f0f0f0",
+          "borderColor": "#999",
+          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)"
+        }
+      }
+    }
+  }
+}
+```
+
+Only the properties you want to override need to be specified. The plugin provides sensible defaults for all values.
+
+## Future Enhancements (Post-Implementation)
+
+Once theme.json integration is complete, future work could include:
+
+1. **Editor UI Controls** - Add inspector controls for dropdown styling (similar to More button)
+2. **Block Styles** - Register preset variations (e.g., "Minimal", "Card-style", "Bordered")
+3. **Color Presets** - Integrate with theme color palette
+4. **Spacing Presets** - Integrate with theme spacing scale
+5. **Pattern Library** - Provide example configurations for common design systems
+
+## Questions / Decisions Needed
+
+- [ ] Should we support both `itemSpacing` (shorthand) and separate `itemPaddingTop`, `itemPaddingRight`, etc.?
+- [ ] Should dropdown positioning (top offset, alignment) also be configurable via theme.json?
+- [ ] Do we need separate properties for accordion button styling vs. regular links?
+- [ ] Should the transition duration/easing be configurable?
+
+## Success Criteria
+
+- [ ] Plugin ships with `theme.json` providing sensible defaults
+- [ ] All hardcoded dropdown styles replaced with CSS custom properties
+- [ ] CSS stripped down to structural necessities only
+- [ ] Theme builders can override dropdown styles via their theme.json
+- [ ] Documentation clearly explains theme.json integration
+- [ ] More button controls continue to work independently
+- [ ] Multi-level navigation indentation is configurable
+- [ ] All existing functionality preserved (no regressions)

From 458d4ea11d09c59c83151cd03e6de773c0468c79 Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Fri, 2 Jan 2026 11:44:43 -0500
Subject: [PATCH 2/6] add: theme.json support

---
 IMPLEMENTATION-SUMMARY.md                    | 166 +++++++++++++++++++
 README.md                                    |  43 +++++
 build/style-priority-plus-navigation-rtl.css |   2 +-
 build/style-priority-plus-navigation.css     |   2 +-
 src/styles/style.scss                        |  53 ++++--
 test-theme.json                              |  21 +++
 theme.json                                   |  21 +++
 7 files changed, 289 insertions(+), 19 deletions(-)
 create mode 100644 IMPLEMENTATION-SUMMARY.md
 create mode 100644 test-theme.json
 create mode 100644 theme.json

diff --git a/IMPLEMENTATION-SUMMARY.md b/IMPLEMENTATION-SUMMARY.md
new file mode 100644
index 0000000..c702ca3
--- /dev/null
+++ b/IMPLEMENTATION-SUMMARY.md
@@ -0,0 +1,166 @@
+# theme.json Styling Integration - Implementation Summary
+
+## Completed: 2026-01-02
+
+This implementation adds theme.json support for Priority Plus Navigation dropdown styling, allowing theme builders to customize the dropdown appearance through their theme's theme.json file.
+
+## Changes Made
+
+### 1. Created Plugin theme.json ✓
+
+**File:** `/theme.json`
+
+- Added plugin-level theme.json with default dropdown styling values
+- Uses WordPress standard `settings.custom.priorityPlusNavigation` structure
+- Provides sensible defaults matching the previous hardcoded styles
+
+### 2. Refactored SCSS to Use CSS Custom Properties ✓
+
+**File:** `src/styles/style.scss`
+
+**Changes:**
+- Replaced hardcoded dropdown container styles with CSS custom properties
+- Updated dropdown item styles to use configurable spacing and hover colors
+- Applied CSS custom properties to accordion buttons (both click and arrow modes)
+- Implemented multi-level indentation using custom properties
+
+**CSS Variables Used:**
+- `--wp--custom--priority-plus-navigation--dropdown--background-color`
+- `--wp--custom--priority-plus-navigation--dropdown--border-color`
+- `--wp--custom--priority-plus-navigation--dropdown--border-width`
+- `--wp--custom--priority-plus-navigation--dropdown--border-radius`
+- `--wp--custom--priority-plus-navigation--dropdown--box-shadow`
+- `--wp--custom--priority-plus-navigation--dropdown--item-spacing`
+- `--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color`
+- `--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color`
+- `--wp--custom--priority-plus-navigation--dropdown--multi-level-indent`
+
+### 3. Stripped Unnecessary CSS ✓
+
+**Removed:**
+- Arbitrary gap value on More button (0.1rem)
+- Magic number margin on icon (-5px)
+- Hardcoded dropdown padding (0.5rem 0) - now controlled via padding on items
+- Hardcoded top offset (calc(100% + 0.5rem)) - simplified to 100%
+- Generic `transition: all` - replaced with specific property transitions
+
+**Result:** Cleaner, more maintainable CSS with only structural necessities
+
+### 4. Updated Documentation ✓
+
+**File:** `readme.md`
+
+**Added:**
+- New "Theme.json Styling" section in Configuration
+- Complete example theme.json configuration
+- Table of all available properties with descriptions and default values
+- Clear instructions for theme builders
+
+### 5. Build Verification ✓
+
+- Compiled successfully with `npm run build`
+- Verified CSS custom properties are correctly output in compiled CSS
+- Validated theme.json files (plugin and test) as valid JSON
+
+## Files Modified
+
+### New Files
+- `/theme.json` - Plugin default theme.json configuration
+- `/test-theme.json` - Example custom theme.json for testing
+- `/IMPLEMENTATION-SUMMARY.md` - This file
+
+### Modified Files
+- `src/styles/style.scss` - Refactored to use CSS custom properties
+- `readme.md` - Added theme.json documentation
+
+### Unchanged Files
+- `src/styles/_variables.scss` - More button variables remain unchanged
+- `src/variation/controls.js` - Block controls unchanged
+- `classes/class-enqueues.php` - No PHP changes needed
+- All JavaScript files - No JS changes required
+
+## How It Works
+
+### Default Behavior
+
+1. Plugin ships with `theme.json` containing default values
+2. WordPress automatically generates CSS custom properties:
+   - Format: `--wp--custom--priority-plus-navigation--dropdown--{property}`
+   - Available globally on the frontend
+3. SCSS references these properties using `var()`
+4. Dropdown renders with plugin defaults
+
+### Theme Override
+
+1. Theme builder adds custom values to their theme's `theme.json`
+2. WordPress merges theme values over plugin defaults
+3. Custom CSS variables override plugin defaults
+4. Dropdown renders with custom styling
+
+### Example Override
+
+```json
+{
+  "version": 3,
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "backgroundColor": "#f0f0f0",
+          "borderColor": "#999999",
+          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)"
+        }
+      }
+    }
+  }
+}
+```
+
+Only specified properties are overridden; others use plugin defaults.
+
+## Testing Checklist
+
+- [x] Plugin theme.json is valid JSON
+- [x] Test theme.json is valid JSON
+- [x] Build completes without errors
+- [x] CSS custom properties correctly output in compiled CSS
+- [ ] Manual testing: Default styles display correctly
+- [ ] Manual testing: Custom theme.json overrides work
+- [ ] Manual testing: Multi-level indentation functions
+- [ ] Manual testing: Hover states apply correctly
+- [ ] Manual testing: More button controls still work independently
+
+## Next Steps
+
+1. Manual testing in WordPress environment:
+   - Install plugin and activate
+   - Verify default dropdown styles
+   - Add test-theme.json to active theme
+   - Verify custom styles override defaults
+   - Test multi-level navigation indentation
+   - Test all hover states
+
+2. Clean up:
+   - Remove test-theme.json before release (or move to /docs/examples/)
+   - Consider adding more example configurations
+
+3. Future enhancements (as outlined in PLAN.md):
+   - Add editor UI controls for dropdown styling
+   - Register preset block style variations
+   - Integrate with theme color/spacing presets
+
+## Benefits Achieved
+
+✓ **Standards-compliant** - Uses WordPress recommended theme.json pattern
+✓ **Flexible** - Theme builders can override only what they need
+✓ **Future-proof** - Easy to add UI controls later
+✓ **Maintainable** - Clean separation of concerns
+✓ **Developer-friendly** - Well-documented CSS custom properties
+✓ **Clean architecture** - No legacy code or compatibility hacks
+
+## Notes
+
+- This is an unreleased product, so no backward compatibility was needed
+- All existing functionality preserved
+- More button controls remain independent and unchanged
+- Performance impact: negligible (CSS custom properties are native)
diff --git a/README.md b/README.md
index 6438371..db608f3 100644
--- a/README.md
+++ b/README.md
@@ -107,6 +107,49 @@ The block supports all standard WordPress block features:
 - **Spacing**: Margin, Padding
 - **Colors**: Background, Text
 
+### Theme.json Styling
+
+The Priority Plus Navigation dropdown menu can be customized via theme.json. Add the following to your theme's `theme.json` to override the default styles:
+
+```json
+{
+  "version": 3,
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "backgroundColor": "#ffffff",
+          "borderColor": "#dddddd",
+          "borderWidth": "1px",
+          "borderRadius": "4px",
+          "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.15)",
+          "itemSpacing": "0.75rem 1rem",
+          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.05)",
+          "itemHoverTextColor": "inherit",
+          "multiLevelIndent": "1rem"
+        }
+      }
+    }
+  }
+}
+```
+
+**Available Properties:**
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| `backgroundColor` | Dropdown background color | `#ffffff` |
+| `borderColor` | Dropdown border color | `#dddddd` |
+| `borderWidth` | Dropdown border width | `1px` |
+| `borderRadius` | Dropdown corner radius | `4px` |
+| `boxShadow` | Dropdown box shadow | `0 4px 12px rgba(0, 0, 0, 0.15)` |
+| `itemSpacing` | Padding around dropdown items | `0.75rem 1rem` |
+| `itemHoverBackgroundColor` | Background color on item hover | `rgba(0, 0, 0, 0.05)` |
+| `itemHoverTextColor` | Text color on item hover | `inherit` |
+| `multiLevelIndent` | Indentation for nested submenus | `1rem` |
+
+Only specify the properties you want to override. The plugin provides sensible defaults for all values.
+
 ## How It Works
 
 ### Architecture
diff --git a/build/style-priority-plus-navigation-rtl.css b/build/style-priority-plus-navigation-rtl.css
index 9a1dfd8..63fa8f1 100644
--- a/build/style-priority-plus-navigation-rtl.css
+++ b/build/style-priority-plus-navigation-rtl.css
@@ -1 +1 @@
-.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);gap:.1rem;padding:var(--priority-plus-navigation--padding);transition:all .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1;margin-left:-5px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentColor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);list-style:none;margin:0;min-width:200px;opacity:0;padding:.5rem 0;position:absolute;left:0;top:calc(100% + .5rem);transform:translateY(-10px);transition:all .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:.75rem 1rem;text-decoration:none;transition:background .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:rgba(0,0,0,.05)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-right:1rem}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:.75rem 1rem;text-align:right;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:.75rem 1rem}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:.75rem}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
+.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentColor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-right:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
diff --git a/build/style-priority-plus-navigation.css b/build/style-priority-plus-navigation.css
index 3feaf60..bfc8b41 100644
--- a/build/style-priority-plus-navigation.css
+++ b/build/style-priority-plus-navigation.css
@@ -1 +1 @@
-.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);gap:.1rem;padding:var(--priority-plus-navigation--padding);transition:all .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1;margin-right:-5px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentColor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);list-style:none;margin:0;min-width:200px;opacity:0;padding:.5rem 0;position:absolute;right:0;top:calc(100% + .5rem);transform:translateY(-10px);transition:all .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:.75rem 1rem;text-decoration:none;transition:background .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:rgba(0,0,0,.05)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-left:1rem}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:.75rem 1rem;text-align:left;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:.75rem 1rem}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:.75rem}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
+.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentColor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-left:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index cd439e5..99237d6 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -5,7 +5,6 @@
 
 	.priority-plus-navigation-more-button {
 		display: flex;
-		gap: 0.1rem;
 		align-items: center;
 		font-family: var(--priority-plus-navigation--font-family);
 		font-size: var(--priority-plus-navigation--font-size);
@@ -17,7 +16,7 @@
 		border-style: var(--priority-plus-navigation--border-style);
 		border-width: var(--priority-plus-navigation--border-width);
 		border-radius: var(--priority-plus-navigation--border-radius);
-		transition: all 0.2s ease;
+		transition: background 0.2s ease, color 0.2s ease;
 		cursor: pointer;
 
 		&:hover {
@@ -29,7 +28,6 @@
 			display: inline-flex;
 			align-items: center;
 			line-height: 1;
-            margin-right: -5px;
 
 			svg {
 				fill: currentColor;
@@ -47,21 +45,23 @@
 
 	.priority-plus-navigation-dropdown {
 		position: absolute;
-		top: calc(100% + 0.5rem);
+		top: 100%;
 		right: 0;
 		min-width: 200px;
-		background: #fff;
-		border: 1px solid #ddd;
-		border-radius: 4px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		background: var(--wp--custom--priority-plus-navigation--dropdown--background-color);
+		border-width: var(--wp--custom--priority-plus-navigation--dropdown--border-width);
+		border-style: solid;
+		border-color: var(--wp--custom--priority-plus-navigation--dropdown--border-color);
+		border-radius: var(--wp--custom--priority-plus-navigation--dropdown--border-radius);
+		box-shadow: var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);
 		list-style: none;
 		margin: 0;
-		padding: 0.5rem 0;
+		padding: 0;
 		z-index: 1000;
 		opacity: 0;
 		visibility: hidden;
 		transform: translateY(-10px);
-		transition: all 0.2s ease;
+		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
 
 		&.is-open {
 			opacity: 1;
@@ -75,13 +75,14 @@
 
 			a {
 				display: block;
-				padding: 0.75rem 1rem;
+				padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);
 				color: inherit;
 				text-decoration: none;
-				transition: background 0.2s ease;
+				transition: background 0.2s ease, color 0.2s ease;
 
 				&:hover {
-					background: rgba(0, 0, 0, 0.05);
+					background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);
+					color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color);
 				}
 			}
 		}
@@ -104,7 +105,7 @@
 
 			// Nested level indentation
 			.priority-plus-navigation-accordion-content {
-				padding-left: 1rem;
+				padding-left: var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent);
 			}
 		}
 
@@ -122,7 +123,7 @@
 			align-items: center;
 			justify-content: space-between;
 			width: 100%;
-			padding: 0.75rem 1rem;
+			padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);
 			background: transparent;
 			border: none;
 			cursor: pointer;
@@ -130,6 +131,7 @@
 			font-family: inherit;
 			color: inherit;
 			text-align: left;
+			transition: background 0.2s ease, color 0.2s ease;
 
 			.priority-plus-navigation-accordion-text {
 				flex: 1;
@@ -140,6 +142,11 @@
 				transition: transform 0.2s ease;
 			}
 
+			&:hover {
+				background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);
+				color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color);
+			}
+
 			&[aria-expanded="true"] {
 
 				.priority-plus-navigation-accordion-arrow {
@@ -151,11 +158,17 @@
 		// Arrow mode: link stays functional, separate arrow button
 		.priority-plus-navigation-accordion-link {
 			flex: 1;
-			padding: 0.75rem 1rem;
+			padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);
+			transition: background 0.2s ease, color 0.2s ease;
+
+			&:hover {
+				background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);
+				color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color);
+			}
 		}
 
 		.priority-plus-navigation-accordion-toggle-arrow {
-			padding: 0.75rem;
+			padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);
 			background: transparent;
 			border: none;
 			cursor: pointer;
@@ -163,12 +176,18 @@
 			font-family: inherit;
 			color: inherit;
 			flex-shrink: 0;
+			transition: background 0.2s ease, color 0.2s ease;
 
 			.priority-plus-navigation-accordion-arrow {
 				transition: transform 0.2s ease;
 				display: inline-block;
 			}
 
+			&:hover {
+				background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);
+				color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color);
+			}
+
 			&[aria-expanded="true"] {
 
 				.priority-plus-navigation-accordion-arrow {
diff --git a/test-theme.json b/test-theme.json
new file mode 100644
index 0000000..9588a23
--- /dev/null
+++ b/test-theme.json
@@ -0,0 +1,21 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 3,
+	"settings": {
+		"custom": {
+			"priorityPlusNavigation": {
+				"dropdown": {
+					"backgroundColor": "#f0f0f0",
+					"borderColor": "#999999",
+					"borderWidth": "2px",
+					"borderRadius": "8px",
+					"boxShadow": "0 8px 16px rgba(0, 0, 0, 0.2)",
+					"itemSpacing": "1rem 1.5rem",
+					"itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)",
+					"itemHoverTextColor": "#007cba",
+					"multiLevelIndent": "1.5rem"
+				}
+			}
+		}
+	}
+}
diff --git a/theme.json b/theme.json
new file mode 100644
index 0000000..69a8b0e
--- /dev/null
+++ b/theme.json
@@ -0,0 +1,21 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 3,
+	"settings": {
+		"custom": {
+			"priorityPlusNavigation": {
+				"dropdown": {
+					"backgroundColor": "#ffffff",
+					"borderColor": "#dddddd",
+					"borderWidth": "1px",
+					"borderRadius": "4px",
+					"boxShadow": "0 4px 12px rgba(0, 0, 0, 0.15)",
+					"itemSpacing": "0.75rem 1rem",
+					"itemHoverBackgroundColor": "rgba(0, 0, 0, 0.05)",
+					"itemHoverTextColor": "inherit",
+					"multiLevelIndent": "1rem"
+				}
+			}
+		}
+	}
+}

From 0360e089298f64f83bddedd4a2e63d7952ec5358 Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Fri, 2 Jan 2026 12:04:23 -0500
Subject: [PATCH 3/6] add: submenu style defaults with theme.json overrides

---
 IMPLEMENTATION-SUMMARY.md                    | 166 -----------
 PLAN.md                                      | 287 -------------------
 README.md                                    |  34 +--
 build/priority-plus-nav-editor-rtl.css       |   2 +-
 build/priority-plus-nav-editor.asset.php     |   2 +-
 build/priority-plus-nav-editor.css           |   2 +-
 build/style-priority-plus-navigation-rtl.css |   2 +-
 build/style-priority-plus-navigation.css     |   2 +-
 docs/README.md                               |   8 +
 docs/styling.md                              | 276 ++++++++++++++++++
 src/styles/_variables.scss                   |  26 +-
 src/styles/style.scss                        |   2 +-
 theme.json                                   |  21 --
 13 files changed, 318 insertions(+), 512 deletions(-)
 delete mode 100644 IMPLEMENTATION-SUMMARY.md
 delete mode 100644 PLAN.md
 create mode 100644 docs/styling.md
 delete mode 100644 theme.json

diff --git a/IMPLEMENTATION-SUMMARY.md b/IMPLEMENTATION-SUMMARY.md
deleted file mode 100644
index c702ca3..0000000
--- a/IMPLEMENTATION-SUMMARY.md
+++ /dev/null
@@ -1,166 +0,0 @@
-# theme.json Styling Integration - Implementation Summary
-
-## Completed: 2026-01-02
-
-This implementation adds theme.json support for Priority Plus Navigation dropdown styling, allowing theme builders to customize the dropdown appearance through their theme's theme.json file.
-
-## Changes Made
-
-### 1. Created Plugin theme.json ✓
-
-**File:** `/theme.json`
-
-- Added plugin-level theme.json with default dropdown styling values
-- Uses WordPress standard `settings.custom.priorityPlusNavigation` structure
-- Provides sensible defaults matching the previous hardcoded styles
-
-### 2. Refactored SCSS to Use CSS Custom Properties ✓
-
-**File:** `src/styles/style.scss`
-
-**Changes:**
-- Replaced hardcoded dropdown container styles with CSS custom properties
-- Updated dropdown item styles to use configurable spacing and hover colors
-- Applied CSS custom properties to accordion buttons (both click and arrow modes)
-- Implemented multi-level indentation using custom properties
-
-**CSS Variables Used:**
-- `--wp--custom--priority-plus-navigation--dropdown--background-color`
-- `--wp--custom--priority-plus-navigation--dropdown--border-color`
-- `--wp--custom--priority-plus-navigation--dropdown--border-width`
-- `--wp--custom--priority-plus-navigation--dropdown--border-radius`
-- `--wp--custom--priority-plus-navigation--dropdown--box-shadow`
-- `--wp--custom--priority-plus-navigation--dropdown--item-spacing`
-- `--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color`
-- `--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color`
-- `--wp--custom--priority-plus-navigation--dropdown--multi-level-indent`
-
-### 3. Stripped Unnecessary CSS ✓
-
-**Removed:**
-- Arbitrary gap value on More button (0.1rem)
-- Magic number margin on icon (-5px)
-- Hardcoded dropdown padding (0.5rem 0) - now controlled via padding on items
-- Hardcoded top offset (calc(100% + 0.5rem)) - simplified to 100%
-- Generic `transition: all` - replaced with specific property transitions
-
-**Result:** Cleaner, more maintainable CSS with only structural necessities
-
-### 4. Updated Documentation ✓
-
-**File:** `readme.md`
-
-**Added:**
-- New "Theme.json Styling" section in Configuration
-- Complete example theme.json configuration
-- Table of all available properties with descriptions and default values
-- Clear instructions for theme builders
-
-### 5. Build Verification ✓
-
-- Compiled successfully with `npm run build`
-- Verified CSS custom properties are correctly output in compiled CSS
-- Validated theme.json files (plugin and test) as valid JSON
-
-## Files Modified
-
-### New Files
-- `/theme.json` - Plugin default theme.json configuration
-- `/test-theme.json` - Example custom theme.json for testing
-- `/IMPLEMENTATION-SUMMARY.md` - This file
-
-### Modified Files
-- `src/styles/style.scss` - Refactored to use CSS custom properties
-- `readme.md` - Added theme.json documentation
-
-### Unchanged Files
-- `src/styles/_variables.scss` - More button variables remain unchanged
-- `src/variation/controls.js` - Block controls unchanged
-- `classes/class-enqueues.php` - No PHP changes needed
-- All JavaScript files - No JS changes required
-
-## How It Works
-
-### Default Behavior
-
-1. Plugin ships with `theme.json` containing default values
-2. WordPress automatically generates CSS custom properties:
-   - Format: `--wp--custom--priority-plus-navigation--dropdown--{property}`
-   - Available globally on the frontend
-3. SCSS references these properties using `var()`
-4. Dropdown renders with plugin defaults
-
-### Theme Override
-
-1. Theme builder adds custom values to their theme's `theme.json`
-2. WordPress merges theme values over plugin defaults
-3. Custom CSS variables override plugin defaults
-4. Dropdown renders with custom styling
-
-### Example Override
-
-```json
-{
-  "version": 3,
-  "settings": {
-    "custom": {
-      "priorityPlusNavigation": {
-        "dropdown": {
-          "backgroundColor": "#f0f0f0",
-          "borderColor": "#999999",
-          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)"
-        }
-      }
-    }
-  }
-}
-```
-
-Only specified properties are overridden; others use plugin defaults.
-
-## Testing Checklist
-
-- [x] Plugin theme.json is valid JSON
-- [x] Test theme.json is valid JSON
-- [x] Build completes without errors
-- [x] CSS custom properties correctly output in compiled CSS
-- [ ] Manual testing: Default styles display correctly
-- [ ] Manual testing: Custom theme.json overrides work
-- [ ] Manual testing: Multi-level indentation functions
-- [ ] Manual testing: Hover states apply correctly
-- [ ] Manual testing: More button controls still work independently
-
-## Next Steps
-
-1. Manual testing in WordPress environment:
-   - Install plugin and activate
-   - Verify default dropdown styles
-   - Add test-theme.json to active theme
-   - Verify custom styles override defaults
-   - Test multi-level navigation indentation
-   - Test all hover states
-
-2. Clean up:
-   - Remove test-theme.json before release (or move to /docs/examples/)
-   - Consider adding more example configurations
-
-3. Future enhancements (as outlined in PLAN.md):
-   - Add editor UI controls for dropdown styling
-   - Register preset block style variations
-   - Integrate with theme color/spacing presets
-
-## Benefits Achieved
-
-✓ **Standards-compliant** - Uses WordPress recommended theme.json pattern
-✓ **Flexible** - Theme builders can override only what they need
-✓ **Future-proof** - Easy to add UI controls later
-✓ **Maintainable** - Clean separation of concerns
-✓ **Developer-friendly** - Well-documented CSS custom properties
-✓ **Clean architecture** - No legacy code or compatibility hacks
-
-## Notes
-
-- This is an unreleased product, so no backward compatibility was needed
-- All existing functionality preserved
-- More button controls remain independent and unchanged
-- Performance impact: negligible (CSS custom properties are native)
diff --git a/PLAN.md b/PLAN.md
deleted file mode 100644
index 2ecedbe..0000000
--- a/PLAN.md
+++ /dev/null
@@ -1,287 +0,0 @@
-# Priority Plus Navigation - theme.json Styling Integration
-
-## Overview
-
-Integrate theme.json support for Priority Plus Navigation styling, allowing users to customize dropdown menu appearance through their theme's theme.json file while maintaining plugin defaults.
-
-## Goals
-
-1. Enable theme.json-based styling for the Priority Plus dropdown menu
-2. Strip down existing CSS to bare necessities
-3. Set sensible plugin defaults that can be overridden via theme.json
-4. Prepare foundation for future UI-based controls
-
-**Note:** This is an unreleased product, so no backward compatibility considerations are needed.
-
-## Current State Analysis
-
-### Existing Styling (To Be Cleaned Up)
-
-**_variables.scss** - Button-specific CSS custom properties (KEEP - already working):
-- `--priority-plus-navigation--background`
-- `--priority-plus-navigation--background-hover`
-- `--priority-plus-navigation--color`
-- `--priority-plus-navigation--color-hover`
-- `--priority-plus-navigation--border-*`
-- `--priority-plus-navigation--font-*`
-- `--priority-plus-navigation--padding`
-
-**style.scss** - Hardcoded dropdown styles (NEEDS CLEANUP):
-- Lines 48-86: Dropdown container (background, border, border-radius, box-shadow, spacing)
-- Lines 76-86: Dropdown item links (padding, hover background)
-- Lines 106-108: Multi-level indentation (hardcoded 1rem)
-
-### Block Attributes (Already Implemented)
-
-Editor controls already exist for "More" button:
-- `priorityNavMoreLabel`
-- `priorityNavMoreIcon`
-- `priorityNavMoreBackgroundColor`
-- `priorityNavMoreBackgroundColorHover`
-- `priorityNavMoreTextColor`
-- `priorityNavMoreTextColorHover`
-- `priorityNavMorePadding`
-
-## Proposed theme.json Structure
-
-### Recommended WordPress Pattern
-
-According to WordPress documentation, custom settings use `settings.custom` which generates CSS custom properties with the `--wp--custom--` prefix. CamelCased keys are automatically converted to kebab-case.
-
-**Reference:** [Theme.json Version 3 Reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/)
-
-### Our Implementation
-
-Users will define settings in their theme's `theme.json`:
-
-```json
-{
-  "version": 3,
-  "settings": {
-    "custom": {
-      "priorityPlusNavigation": {
-        "dropdown": {
-          "backgroundColor": "#ffffff",
-          "borderColor": "#ddd",
-          "borderWidth": "1px",
-          "borderRadius": "4px",
-          "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.15)",
-          "itemSpacing": "0.75rem 1rem",
-          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.05)",
-          "itemHoverTextColor": "inherit",
-          "multiLevelIndent": "1rem"
-        }
-      }
-    }
-  }
-}
-```
-
-### Generated CSS Custom Properties
-
-This generates the following CSS variables (automatically available):
-
-- `--wp--custom--priority-plus-navigation--dropdown--background-color`
-- `--wp--custom--priority-plus-navigation--dropdown--border-color`
-- `--wp--custom--priority-plus-navigation--dropdown--border-width`
-- `--wp--custom--priority-plus-navigation--dropdown--border-radius`
-- `--wp--custom--priority-plus-navigation--dropdown--box-shadow`
-- `--wp--custom--priority-plus-navigation--dropdown--item-spacing`
-- `--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color`
-- `--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color`
-- `--wp--custom--priority-plus-navigation--dropdown--multi-level-indent`
-
-## Implementation Plan
-
-### Phase 1: Create Plugin Default theme.json
-
-**File:** `/theme.json` (in plugin root)
-
-WordPress supports theme.json files in plugins (since WP 6.1). This file provides default values that themes can override.
-
-**Action:**
-1. Create `theme.json` in plugin root
-2. Define default values for Priority Plus dropdown styling
-3. Use sensible defaults that match current hardcoded styles
-
-**Reference:** Plugins can ship theme.json to provide defaults ([Global Settings & Styles Documentation](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/))
-
-### Phase 2: Refactor SCSS to Use CSS Custom Properties
-
-**File:** `src/styles/style.scss`
-
-**Actions:**
-
-1. **Strip down dropdown container styles** (lines 48-86)
-   - Remove hardcoded colors, borders, shadows, spacing
-   - Replace with CSS custom property references using `var()`
-   - Keep only structural/functional CSS (position, z-index, transitions, visibility)
-
-2. **Update dropdown item styles** (lines 76-86)
-   - Replace hardcoded padding with custom property
-   - Replace hardcoded hover background with custom property
-   - Add hover text color support
-
-3. **Update multi-level accordion indentation** (lines 106-108)
-   - Replace hardcoded `1rem` with custom property
-   - Use CSS custom property for flexible nesting levels
-
-**Example refactoring:**
-
-```scss
-// BEFORE (Hardcoded)
-.priority-plus-navigation-dropdown {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-// AFTER (CSS Custom Properties - no fallbacks needed)
-.priority-plus-navigation-dropdown {
-    background: var(--wp--custom--priority-plus-navigation--dropdown--background-color);
-    border-width: var(--wp--custom--priority-plus-navigation--dropdown--border-width);
-    border-style: solid;
-    border-color: var(--wp--custom--priority-plus-navigation--dropdown--border-color);
-    border-radius: var(--wp--custom--priority-plus-navigation--dropdown--border-radius);
-    box-shadow: var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);
-}
-```
-
-### Phase 3: Remove Unnecessary CSS
-
-**File:** `src/styles/style.scss`
-
-**Actions:**
-1. Identify and remove any extra spacing, radius, or decorative CSS not essential for core functionality
-2. Keep only:
-   - Positioning and layout (flexbox, absolute positioning)
-   - Visibility/display states (hidden, open)
-   - Transitions and transforms (animations)
-   - ARIA-related display rules
-   - Z-index and stacking context
-3. Move all visual styling to CSS custom properties
-
-### Phase 4: Documentation
-
-**Files:**
-- `README.md`
-- `docs/README.md` or new `docs/theme-json-styling.md`
-
-**Actions:**
-1. Document the new theme.json integration
-2. Provide example theme.json configuration
-3. List all available custom properties
-4. Explain the override hierarchy (plugin defaults → theme.json → block attributes for button)
-
-### Phase 5: Testing
-
-**Test Cases:**
-
-1. **Default behavior** (no theme.json customization)
-   - Dropdown displays with plugin default styles
-   - Verify all CSS custom properties render correctly
-
-2. **theme.json override**
-   - Create test theme.json with custom values
-   - Verify CSS custom properties are applied
-   - Test all properties individually
-
-3. **Multi-level navigation**
-   - Test multi-level indentation with custom values
-   - Verify nested accordions respect indentation setting
-
-4. **Block attribute priority** (More button)
-   - Verify More button block attributes still work
-   - Confirm button styling is independent of dropdown styling
-
-## File Changes Summary
-
-### New Files
-- `/theme.json` - Plugin default theme.json configuration
-
-### Modified Files
-- `src/styles/style.scss` - Refactor dropdown styles to use CSS custom properties
-- `src/styles/_variables.scss` - Keep as-is (More button variables)
-- `README.md` - Add theme.json documentation section
-- `docs/` - Add theme.json styling guide (optional)
-
-### No Changes Required
-- `src/variation/controls.js` - Block controls stay the same (More button only)
-- `classes/class-enqueues.php` - No changes needed (handles More button attributes)
-- All JavaScript files - No changes needed
-
-## CSS Custom Properties Reference
-
-### Plugin Defaults → theme.json Overrides
-
-| Property | Default Value | theme.json Path | CSS Variable |
-|----------|---------------|-----------------|--------------|
-| Dropdown Background | `#ffffff` | `settings.custom.priorityPlusNavigation.dropdown.backgroundColor` | `--wp--custom--priority-plus-navigation--dropdown--background-color` |
-| Dropdown Border Color | `#dddddd` | `settings.custom.priorityPlusNavigation.dropdown.borderColor` | `--wp--custom--priority-plus-navigation--dropdown--border-color` |
-| Dropdown Border Width | `1px` | `settings.custom.priorityPlusNavigation.dropdown.borderWidth` | `--wp--custom--priority-plus-navigation--dropdown--border-width` |
-| Dropdown Border Radius | `4px` | `settings.custom.priorityPlusNavigation.dropdown.borderRadius` | `--wp--custom--priority-plus-navigation--dropdown--border-radius` |
-| Dropdown Box Shadow | `0 4px 12px rgba(0, 0, 0, 0.15)` | `settings.custom.priorityPlusNavigation.dropdown.boxShadow` | `--wp--custom--priority-plus-navigation--dropdown--box-shadow` |
-| Item Padding | `0.75rem 1rem` | `settings.custom.priorityPlusNavigation.dropdown.itemSpacing` | `--wp--custom--priority-plus-navigation--dropdown--item-spacing` |
-| Item Hover Background | `rgba(0, 0, 0, 0.05)` | `settings.custom.priorityPlusNavigation.dropdown.itemHoverBackgroundColor` | `--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color` |
-| Item Hover Text Color | `inherit` | `settings.custom.priorityPlusNavigation.dropdown.itemHoverTextColor` | `--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color` |
-| Multi-level Indent | `1rem` | `settings.custom.priorityPlusNavigation.dropdown.multiLevelIndent` | `--wp--custom--priority-plus-navigation--dropdown--multi-level-indent` |
-
-## Benefits of This Approach
-
-1. **Standards-compliant** - Uses WordPress recommended theme.json pattern
-2. **Flexible** - Theme builders can override only what they need
-3. **Future-proof** - Easy to add UI controls later (read from theme.json, write to block attributes)
-4. **Maintainable** - Separates concerns (plugin defaults vs. theme customization)
-5. **Developer-friendly** - Clear, documented CSS custom properties
-6. **Clean architecture** - No legacy code or backward compatibility hacks
-
-## Usage for Theme Builders
-
-Theme builders can customize the Priority Plus Navigation dropdown by adding settings to their theme's `theme.json`:
-
-```json
-{
-  "version": 3,
-  "settings": {
-    "custom": {
-      "priorityPlusNavigation": {
-        "dropdown": {
-          "backgroundColor": "#f0f0f0",
-          "borderColor": "#999",
-          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)"
-        }
-      }
-    }
-  }
-}
-```
-
-Only the properties you want to override need to be specified. The plugin provides sensible defaults for all values.
-
-## Future Enhancements (Post-Implementation)
-
-Once theme.json integration is complete, future work could include:
-
-1. **Editor UI Controls** - Add inspector controls for dropdown styling (similar to More button)
-2. **Block Styles** - Register preset variations (e.g., "Minimal", "Card-style", "Bordered")
-3. **Color Presets** - Integrate with theme color palette
-4. **Spacing Presets** - Integrate with theme spacing scale
-5. **Pattern Library** - Provide example configurations for common design systems
-
-## Questions / Decisions Needed
-
-- [ ] Should we support both `itemSpacing` (shorthand) and separate `itemPaddingTop`, `itemPaddingRight`, etc.?
-- [ ] Should dropdown positioning (top offset, alignment) also be configurable via theme.json?
-- [ ] Do we need separate properties for accordion button styling vs. regular links?
-- [ ] Should the transition duration/easing be configurable?
-
-## Success Criteria
-
-- [ ] Plugin ships with `theme.json` providing sensible defaults
-- [ ] All hardcoded dropdown styles replaced with CSS custom properties
-- [ ] CSS stripped down to structural necessities only
-- [ ] Theme builders can override dropdown styles via their theme.json
-- [ ] Documentation clearly explains theme.json integration
-- [ ] More button controls continue to work independently
-- [ ] Multi-level navigation indentation is configurable
-- [ ] All existing functionality preserved (no regressions)
diff --git a/README.md b/README.md
index db608f3..0d05b7a 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,9 @@ The block supports all standard WordPress block features:
 
 ### Theme.json Styling
 
-The Priority Plus Navigation dropdown menu can be customized via theme.json. Add the following to your theme's `theme.json` to override the default styles:
+The Priority Plus Navigation dropdown menu can be customized via your theme's `theme.json`. The plugin provides sensible defaults, and you can override any property you want to customize.
+
+**Quick Example:**
 
 ```json
 {
@@ -118,15 +120,9 @@ The Priority Plus Navigation dropdown menu can be customized via theme.json. Add
     "custom": {
       "priorityPlusNavigation": {
         "dropdown": {
-          "backgroundColor": "#ffffff",
-          "borderColor": "#dddddd",
-          "borderWidth": "1px",
-          "borderRadius": "4px",
-          "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.15)",
-          "itemSpacing": "0.75rem 1rem",
-          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.05)",
-          "itemHoverTextColor": "inherit",
-          "multiLevelIndent": "1rem"
+          "backgroundColor": "#f0f0f0",
+          "borderColor": "#999999",
+          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)"
         }
       }
     }
@@ -134,21 +130,9 @@ The Priority Plus Navigation dropdown menu can be customized via theme.json. Add
 }
 ```
 
-**Available Properties:**
-
-| Property | Description | Default Value |
-|----------|-------------|---------------|
-| `backgroundColor` | Dropdown background color | `#ffffff` |
-| `borderColor` | Dropdown border color | `#dddddd` |
-| `borderWidth` | Dropdown border width | `1px` |
-| `borderRadius` | Dropdown corner radius | `4px` |
-| `boxShadow` | Dropdown box shadow | `0 4px 12px rgba(0, 0, 0, 0.15)` |
-| `itemSpacing` | Padding around dropdown items | `0.75rem 1rem` |
-| `itemHoverBackgroundColor` | Background color on item hover | `rgba(0, 0, 0, 0.05)` |
-| `itemHoverTextColor` | Text color on item hover | `inherit` |
-| `multiLevelIndent` | Indentation for nested submenus | `1rem` |
-
-Only specify the properties you want to override. The plugin provides sensible defaults for all values.
+**Available Properties:** `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, `boxShadow`, `itemSpacing`, `itemHoverBackgroundColor`, `itemHoverTextColor`, `multiLevelIndent`
+
+**📖 For complete styling documentation, examples, and troubleshooting, see [docs/styling.md](docs/styling.md)**
 
 ## How It Works
 
diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css
index 9fea353..4fae410 100644
--- a/build/priority-plus-nav-editor-rtl.css
+++ b/build/priority-plus-nav-editor-rtl.css
@@ -1 +1 @@
-.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through}
diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php
index 2a6d54a..447ddb2 100644
--- a/build/priority-plus-nav-editor.asset.php
+++ b/build/priority-plus-nav-editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'e4f2872018d1c6be1b93');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '040298b306aa1a58ba3b');
diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css
index 9fea353..4fae410 100644
--- a/build/priority-plus-nav-editor.css
+++ b/build/priority-plus-nav-editor.css
@@ -1 +1 @@
-.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through}
diff --git a/build/style-priority-plus-navigation-rtl.css b/build/style-priority-plus-navigation-rtl.css
index 63fa8f1..3b1b2ea 100644
--- a/build/style-priority-plus-navigation-rtl.css
+++ b/build/style-priority-plus-navigation-rtl.css
@@ -1 +1 @@
-.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentColor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-right:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-right:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
diff --git a/build/style-priority-plus-navigation.css b/build/style-priority-plus-navigation.css
index bfc8b41..3971a44 100644
--- a/build/style-priority-plus-navigation.css
+++ b/build/style-priority-plus-navigation.css
@@ -1 +1 @@
-.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentColor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-left:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-left:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
diff --git a/docs/README.md b/docs/README.md
index 9439ca6..4a5dafc 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -63,6 +63,14 @@ See the main [README.md](../README.md) for:
 - How to use the block
 - Configuration options
 
+### For Theme Builders
+
+See [styling.md](styling.md) for:
+- Complete theme.json styling guide
+- Available CSS custom properties
+- Common customization examples
+- Troubleshooting styling issues
+
 ### For Developers
 
 See [how-it-works.md](how-it-works.md) for:
diff --git a/docs/styling.md b/docs/styling.md
new file mode 100644
index 0000000..2ca3004
--- /dev/null
+++ b/docs/styling.md
@@ -0,0 +1,276 @@
+# Styling Priority Plus Navigation
+
+This guide explains how to customize the appearance of the Priority Plus Navigation dropdown menu using theme.json.
+
+## Overview
+
+The Priority Plus Navigation plugin provides sensible defaults for dropdown styling, which can be easily customized through your theme's `theme.json` file. The plugin uses CSS custom properties that can be overridden without writing any custom CSS.
+
+## Quick Start
+
+Add the following to your theme's `theme.json` file:
+
+```json
+{
+  "version": 3,
+  "settings": {
+    "custom": {
+        "priorityPlusNavigation": {
+            "dropdown": {
+                "backgroundColor": "#f0f0f0",
+                "borderColor": "#999999",
+                "borderWidth": "2px",
+                "borderRadius": "8px",
+                "boxShadow": "0 8px 16px rgba(0, 0, 0, 0.2)",
+                "itemSpacing": "1rem 1.5rem",
+                "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)",
+                "itemHoverTextColor": "#007cba",
+                "multiLevelIndent": "3.5rem"
+            }
+        }
+    },
+  }
+}
+```
+
+Only specify the properties you want to customize. All properties are optional.
+
+## Available Properties
+
+### Dropdown Container
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| `backgroundColor` | Background color of the dropdown menu | `#ffffff` |
+| `borderColor` | Border color of the dropdown menu | `#dddddd` |
+| `borderWidth` | Width of the dropdown border | `1px` |
+| `borderRadius` | Corner radius of the dropdown | `4px` |
+| `boxShadow` | Shadow effect for the dropdown | `0 4px 12px rgba(0, 0, 0, 0.15)` |
+
+### Dropdown Items
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| `itemSpacing` | Padding around each dropdown item | `0.75rem 1rem` |
+| `itemHoverBackgroundColor` | Background color when hovering over an item | `rgba(0, 0, 0, 0.05)` |
+| `itemHoverTextColor` | Text color when hovering over an item | `inherit` |
+
+### Multi-level Navigation
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| `multiLevelIndent` | Indentation for nested submenu levels | `1rem` |
+
+## Complete Example
+
+Here's a complete example showing all available properties:
+
+```json
+{
+  "version": 3,
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "backgroundColor": "#f8f9fa",
+          "borderColor": "#dee2e6",
+          "borderWidth": "2px",
+          "borderRadius": "8px",
+          "boxShadow": "0 8px 16px rgba(0, 0, 0, 0.2)",
+          "itemSpacing": "1rem 1.5rem",
+          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)",
+          "itemHoverTextColor": "#0066cc",
+          "multiLevelIndent": "1.5rem"
+        }
+      }
+    }
+  }
+}
+```
+
+## How It Works
+
+### CSS Custom Properties
+
+The plugin defines CSS custom properties on the `:root` selector with default values. WordPress generates CSS custom properties from your theme.json on the `body` selector, which overrides the plugin defaults through CSS cascade.
+
+**Plugin defaults (`:root`):**
+```css
+:root {
+  --wp--custom--priority-plus-navigation--dropdown--background-color: #ffffff;
+  --wp--custom--priority-plus-navigation--dropdown--border-color: #dddddd;
+  /* ... etc */
+}
+```
+
+**Theme.json generates (`body`):**
+```css
+body {
+  --wp--custom--priority-plus-navigation--dropdown--background-color: #f0f0f0;
+  --wp--custom--priority-plus-navigation--dropdown--border-color: #999999;
+  /* ... etc */
+}
+```
+
+Since both selectors have the same specificity and WordPress theme.json CSS loads after the plugin CSS, theme values override plugin defaults.
+
+### Override Hierarchy
+
+1. **Plugin Defaults** (`:root` selector in plugin CSS)
+2. **Theme.json** (`body` selector from WordPress)
+3. **Custom CSS** (your theme's custom stylesheet - highest priority)
+
+## Common Customizations
+
+### Minimal Style
+
+Remove borders and shadows for a minimal look:
+
+```json
+{
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "borderWidth": "0",
+          "boxShadow": "none"
+        }
+      }
+    }
+  }
+}
+```
+
+### Card Style
+
+Add more spacing and shadow for a card-like appearance:
+
+```json
+{
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "borderRadius": "12px",
+          "boxShadow": "0 10px 25px rgba(0, 0, 0, 0.1)",
+          "itemSpacing": "1.25rem 1.5rem"
+        }
+      }
+    }
+  }
+}
+```
+
+### High Contrast
+
+Increase contrast for better accessibility:
+
+```json
+{
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "backgroundColor": "#000000",
+          "borderColor": "#ffffff",
+          "borderWidth": "2px",
+          "itemHoverBackgroundColor": "#ffffff",
+          "itemHoverTextColor": "#000000"
+        }
+      }
+    }
+  }
+}
+```
+
+## Using WordPress Preset Values
+
+You can reference WordPress color and spacing presets in theme.json:
+
+```json
+{
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "backgroundColor": "var(--wp--preset--color--base)",
+          "borderColor": "var(--wp--preset--color--contrast)",
+          "itemSpacing": "var(--wp--preset--spacing--30)"
+        }
+      }
+    }
+  }
+}
+```
+
+## Advanced: Custom CSS
+
+If you need even more control, you can write custom CSS targeting the dropdown elements:
+
+```css
+/* In your theme's style.css or custom CSS */
+.is-style-priority-plus-navigation .priority-plus-navigation-dropdown {
+  /* Your custom styles here */
+  backdrop-filter: blur(10px);
+  margin-top: 0.5rem;
+}
+
+.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a {
+  /* Custom item styles */
+  font-weight: 500;
+  letter-spacing: 0.025em;
+}
+```
+
+**Note:** Custom CSS has the highest priority and will override both plugin defaults and theme.json values.
+
+## More Button Styling
+
+The "More" button is styled separately through **block attributes** in the WordPress editor, not theme.json. You can customize it using the block inspector controls:
+
+- Button Label
+- Button Icon
+- Text Color & Hover Color
+- Background Color & Hover Color
+- Padding
+
+See the main [README.md](../README.md) for details on using the block controls.
+
+## Troubleshooting
+
+### My theme.json changes aren't applying
+
+1. **Clear WordPress cache** - Theme.json is cached by WordPress
+2. **Check file location** - Ensure theme.json is in your theme's root directory
+3. **Validate JSON** - Use a JSON validator to check for syntax errors
+4. **Check property names** - Property names are case-sensitive (use camelCase)
+5. **Enable debugging** - Set `WP_DEBUG` or `SCRIPT_DEBUG` to `true` in wp-config.php to disable caching
+
+### Default values showing instead of my customization
+
+WordPress generates theme.json CSS with the `body` selector. Make sure:
+- Your theme.json is valid JSON
+- Property names match exactly (e.g., `backgroundColor`, not `background-color`)
+- Theme.json version is set to `3`
+
+### Need to reset to defaults
+
+Simply remove the `priorityPlusNavigation` section from your theme.json, or delete specific properties you want to reset.
+
+## Browser Compatibility
+
+CSS custom properties (CSS variables) are supported in all modern browsers:
+- Chrome 49+
+- Firefox 31+
+- Safari 9.1+
+- Edge 15+
+
+## Performance
+
+CSS custom properties have negligible performance impact. They are natively supported by browsers and do not require any JavaScript processing.
+
+## Resources
+
+- [WordPress theme.json Documentation](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/)
+- [CSS Custom Properties (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+- [WordPress Custom Settings in theme.json](https://developer.wordpress.org/news/2023/08/adding-and-using-custom-settings-in-theme-json/)
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 877a6b0..e0e84d9 100755
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,4 +1,22 @@
-// CSS custom properties for Priority Nav
+// CSS custom properties for Priority Plus Navigation
+// Set on :root so WordPress theme.json (which uses body selector) can override them
+// Dropdown menu styles (can be overridden via theme.json)
+// WordPress generates: body { --wp--custom--priority-plus-navigation--dropdown--* }
+// Since body has higher specificity than :root, theme.json values will override these defaults
+
+:root {
+	--wp--custom--priority-plus-navigation--dropdown--background-color: #fff;
+	--wp--custom--priority-plus-navigation--dropdown--border-color: #ddd;
+	--wp--custom--priority-plus-navigation--dropdown--border-width: 1px;
+	--wp--custom--priority-plus-navigation--dropdown--border-radius: 4px;
+	--wp--custom--priority-plus-navigation--dropdown--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	--wp--custom--priority-plus-navigation--dropdown--item-spacing: 0.75rem 1.25rem;
+	--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color: rgba(0, 0, 0, 0.05);
+	--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color: inherit;
+	--wp--custom--priority-plus-navigation--dropdown--multi-level-indent: 1rem;
+}
+
+// More button styles (controlled via block attributes, not theme.json)
 .is-style-priority-plus-navigation {
 	--priority-plus-navigation--background: transparent;
 	--priority-plus-navigation--background-hover: transparent;
@@ -13,9 +31,3 @@
 	--priority-plus-navigation--font-weight: inherit;
 	--priority-plus-navigation--padding: 0;
 }
-
-// These can be easily overridden in theme stylesheets by targeting .is-style-priority-plus-navigation, for example:
-// .is-style-priority-plus-navigation {
-//   --priority-plus-navigation--background: #ff0000;
-//   --priority-plus-navigation--color: #ffffff;
-// }
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 99237d6..0168b5c 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -30,7 +30,7 @@
 			line-height: 1;
 
 			svg {
-				fill: currentColor;
+				fill: currentcolor;
 				width: 1.25em;
 				height: 1.25em;
 			}
diff --git a/theme.json b/theme.json
deleted file mode 100644
index 69a8b0e..0000000
--- a/theme.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/theme.json",
-	"version": 3,
-	"settings": {
-		"custom": {
-			"priorityPlusNavigation": {
-				"dropdown": {
-					"backgroundColor": "#ffffff",
-					"borderColor": "#dddddd",
-					"borderWidth": "1px",
-					"borderRadius": "4px",
-					"boxShadow": "0 4px 12px rgba(0, 0, 0, 0.15)",
-					"itemSpacing": "0.75rem 1rem",
-					"itemHoverBackgroundColor": "rgba(0, 0, 0, 0.05)",
-					"itemHoverTextColor": "inherit",
-					"multiLevelIndent": "1rem"
-				}
-			}
-		}
-	}
-}

From 8bb6d056feaa395e1fb5ec490494036f4f92a5ce Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Fri, 2 Jan 2026 13:29:55 -0500
Subject: [PATCH 4/6] change: styles

---
 build/style-priority-plus-navigation-rtl.css | 2 +-
 build/style-priority-plus-navigation.css     | 2 +-
 src/styles/style.scss                        | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/build/style-priority-plus-navigation-rtl.css b/build/style-priority-plus-navigation-rtl.css
index 3b1b2ea..be4ec8d 100644
--- a/build/style-priority-plus-navigation-rtl.css
+++ b/build/style-priority-plus-navigation-rtl.css
@@ -1 +1 @@
-:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-right:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-right:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
diff --git a/build/style-priority-plus-navigation.css b/build/style-priority-plus-navigation.css
index 3971a44..3881208 100644
--- a/build/style-priority-plus-navigation.css
+++ b/build/style-priority-plus-navigation.css
@@ -1 +1 @@
-:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-left:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-left:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 0168b5c..669a248 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -45,6 +45,7 @@
 
 	.priority-plus-navigation-dropdown {
 		position: absolute;
+        overflow: hidden;
 		top: 100%;
 		right: 0;
 		min-width: 200px;

From 0eea78f4b768a29cbe187502b37dec628f2a043a Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Fri, 2 Jan 2026 18:35:47 -0500
Subject: [PATCH 5/6] change: depth indentation styles

---
 build/priority-plus-nav-editor-rtl.css       |  2 +-
 build/priority-plus-nav-editor.asset.php     |  2 +-
 build/priority-plus-nav-editor.css           |  2 +-
 build/style-priority-plus-navigation-rtl.css |  2 +-
 build/style-priority-plus-navigation.css     |  2 +-
 src/styles/_variables.scss                   |  2 +-
 src/styles/style.scss                        | 35 ++++++++++++++++++--
 7 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css
index 4fae410..5e7b9ef 100644
--- a/build/priority-plus-nav-editor-rtl.css
+++ b/build/priority-plus-nav-editor-rtl.css
@@ -1 +1 @@
-:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through}
diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php
index 447ddb2..c350a4c 100644
--- a/build/priority-plus-nav-editor.asset.php
+++ b/build/priority-plus-nav-editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '040298b306aa1a58ba3b');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '51a330a400fb321176cf');
diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css
index 4fae410..5e7b9ef 100644
--- a/build/priority-plus-nav-editor.css
+++ b/build/priority-plus-nav-editor.css
@@ -1 +1 @@
-:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through}
diff --git a/build/style-priority-plus-navigation-rtl.css b/build/style-priority-plus-navigation-rtl.css
index be4ec8d..3dea6e6 100644
--- a/build/style-priority-plus-navigation-rtl.css
+++ b/build/style-priority-plus-navigation-rtl.css
@@ -1 +1 @@
-:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-right:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
diff --git a/build/style-priority-plus-navigation.css b/build/style-priority-plus-navigation.css
index 3881208..4634a59 100644
--- a/build/style-priority-plus-navigation.css
+++ b/build/style-priority-plus-navigation.css
@@ -1 +1 @@
-:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{padding-left:var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
+:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index e0e84d9..e6eaf36 100755
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -13,7 +13,7 @@
 	--wp--custom--priority-plus-navigation--dropdown--item-spacing: 0.75rem 1.25rem;
 	--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color: rgba(0, 0, 0, 0.05);
 	--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color: inherit;
-	--wp--custom--priority-plus-navigation--dropdown--multi-level-indent: 1rem;
+	--wp--custom--priority-plus-navigation--dropdown--multi-level-indent: 1.25rem;
 }
 
 // More button styles (controlled via block attributes, not theme.json)
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 669a248..0275ccd 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -104,9 +104,40 @@
 				display: block !important;
 			}
 
-			// Nested level indentation
+			// Multi-level indentation - each nested level adds indent
+			// Applied to links and accordion toggle buttons
+			// First level - add 1x indent to the left padding
+			> li > a,
+			> li > .priority-plus-navigation-accordion-wrapper > a,
+			> li > .priority-plus-navigation-accordion-toggle-full {
+				padding-left: calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent));
+			}
+
+			// Second level - add 2x indent to the left padding
 			.priority-plus-navigation-accordion-content {
-				padding-left: var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent);
+				> li > a,
+				> li > .priority-plus-navigation-accordion-wrapper > a,
+				> li > .priority-plus-navigation-accordion-toggle-full {
+					padding-left: calc(1rem + (var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent) * 2));
+				}
+
+				// Third level - add 3x indent to the left padding
+				.priority-plus-navigation-accordion-content {
+					> li > a,
+					> li > .priority-plus-navigation-accordion-wrapper > a,
+					> li > .priority-plus-navigation-accordion-toggle-full {
+						padding-left: calc(1rem + (var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent) * 3));
+					}
+
+					// Fourth level - add 4x indent to the left padding
+					.priority-plus-navigation-accordion-content {
+						> li > a,
+						> li > .priority-plus-navigation-accordion-wrapper > a,
+						> li > .priority-plus-navigation-accordion-toggle-full {
+							padding-left: calc(1rem + (var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent) * 4));
+						}
+					}
+				}
 			}
 		}
 

From 40ae3b47ad65775ef42b63f8f870e9d4a501f531 Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Fri, 2 Jan 2026 18:38:51 -0500
Subject: [PATCH 6/6] change: readme.txt

---
 readme.txt | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/readme.txt b/readme.txt
index 3b9f6bb..d1829b3 100755
--- a/readme.txt
+++ b/readme.txt
@@ -18,6 +18,7 @@ Key Features:
 
 * **Automatic Overflow Detection**: Continuously monitors available space and adjusts navigation visibility
 * **Responsive by Design**: Adapts to any screen size or container width
+* **Customizable Styling**: Full theme.json support for dropdown menu styling with CSS custom properties
 * **Customizable Labels**: Change the "More" button text and icon
 * **Seamless Integration**: Works beautifully with WordPress themes
 * **Performance Optimized**: Uses ResizeObserver for efficient layout calculations
@@ -58,6 +59,34 @@ Priority Plus Navigation intelligently integrates with WordPress core navigation
 
 Yes, the block is built with accessibility in mind, supporting keyboard navigation and providing proper ARIA labels for screen readers.
 
+= Can I style the dropdown menu? =
+
+Absolutely! The dropdown menu can be fully customized through your theme's `theme.json` file. You can control:
+
+* Background color and border styling
+* Item spacing and hover effects
+* Multi-level navigation indentation
+* Box shadow and border radius
+
+Example configuration in your theme's `theme.json`:
+
+`{
+  "version": 3,
+  "settings": {
+    "custom": {
+      "priorityPlusNavigation": {
+        "dropdown": {
+          "backgroundColor": "#f0f0f0",
+          "borderColor": "#999999",
+          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)"
+        }
+      }
+    }
+  }
+}`
+
+The plugin provides sensible defaults, and you only need to specify the properties you want to customize. For complete styling documentation, see the [GitHub repository](https://github.com/troychaplin/priority-plus-navigation/blob/main/docs/styling.md).
+
 == Screenshots ==
 
 1. Priority Nav showing all items on wide screens