/**
 * Railway City Epoxy - mobile menu submenu indentation
 * Enqueued by the "RCE Animations" snippet in Code Snippets.
 *
 * Bricks indents the mobile menu with a descendant selector:
 *
 *     .brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu li > a { padding: 0 45px }
 *
 * ".sub-menu li" matches EVERY level below the first, so level 2 and level 3
 * land on the same 45px and read as one flat list. Bricks steps 30px -> 45px
 * from level 1 to level 2, then the ladder stops.
 *
 * This continues that same 15px rhythm rather than inventing a new one:
 *
 *     L1  30px   (Bricks)
 *     L2  45px   (Bricks)
 *     L3  60px   (here)
 *     L4  75px   (here - unused today; the menu is 3 deep)
 *
 * Scoped to .bricks-mobile-menu-wrapper: the desktop submenu is a flyout, where
 * a left indent would only push text off-centre inside its own panel.
 *
 * No !important needed - adding a .sub-menu to the chain outscores the Bricks
 * rule (0,4,2 vs 0,3,2). Only padding-left is set, so Bricks' 45px on the right
 * stays intact.
 */

:root {
	/* Distance added per level below the second. Raise this for a stronger
	   stagger; deeper levels scale from it automatically. */
	--rce-submenu-indent-step: 15px;

	/* Bricks' level-2 padding, kept as a variable so the maths below stays
	   anchored to the value Bricks actually ships. */
	--rce-submenu-indent-base: 45px;
}

/* Level 3 */
.brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu .sub-menu li > a,
.brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu .sub-menu li > .brx-submenu-toggle > * {
	padding-left: calc(var(--rce-submenu-indent-base) + var(--rce-submenu-indent-step));
}

/* Level 4 and deeper */
.brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu .sub-menu .sub-menu li > a,
.brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu .sub-menu .sub-menu li > .brx-submenu-toggle > * {
	padding-left: calc(var(--rce-submenu-indent-base) + var(--rce-submenu-indent-step) * 2);
}