themes-wordpress/spearhead/navigation-rtl.css

/**
 * Required Variables
 */
/**
 * Required Variables
 */
.menu-button-container {
	display: none;
	justify-content: space-between;
	margin: 0;
	right: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

@media only screen and (max-width: 829px) {
	.menu-button-container {
		display: block;
		margin: 0;
		width: auto;
	}
}

.lock-scrolling .menu-button-container > .button {
	position: fixed;
	top: 0;
	left: 0;
}

.menu-button-container #primary-open-menu {
	margin-right: auto;
	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
	margin-top: calc(0.25 * var(--global--spacing-unit));
	margin-left: calc(0.25 * var(--global--spacing-unit));
}

.admin-bar.lock-scrolling .menu-button-container > .button,
.admin-bar:not(.primary-navigation-open) .menu-button-container {
	top: var(--wpadmin-bar--height);
}

.has-marketing-bar.lock-scrolling .menu-button-container > .button,
.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
	top: var(--wpcom-marketing-bar--height);
}

.admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
.admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
}

#site-navigation + .menu-button-container {
	left: 0;
}

.menu-button-container .button,
.primary-navigation .button,
.woo-navigation .button {
	font-size: var(--primary-nav--font-size);
	background-color: transparent;
	color: var(--primary-nav--color-link);
	z-index: 500;
}

.menu-button-container .button.open,
.primary-navigation .button.open,
.woo-navigation .button.open {
	display: flex;
}

.menu-button-container .button.close,
.primary-navigation .button.close,
.woo-navigation .button.close {
	display: none;
	position: absolute;
	left: 0;
	z-index: 501;
}

.has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
.primary-navigation .button.close, .has-marketing-bar
.woo-navigation .button.close {
	top: calc(-1 * var(--wpcom-marketing-bar--height));
}

.admin-bar .menu-button-container .button.close, .admin-bar
.primary-navigation .button.close, .admin-bar
.woo-navigation .button.close {
	top: calc(-1 * var(--wpadmin-bar--height));
}

.admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
.primary-navigation .button.close, .admin-bar.has-marketing-bar
.woo-navigation .button.close {
	top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
}

.menu-button-container .button#woo-open-menu,
.primary-navigation .button#woo-open-menu,
.woo-navigation .button#woo-open-menu {
	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
	margin-top: calc(0.25 * var(--global--spacing-unit));
	margin-right: calc(0.25 * var(--global--spacing-unit));
}

.menu-button-container .button#woo-open-menu .svg-icon,
.primary-navigation .button#woo-open-menu .svg-icon,
.woo-navigation .button#woo-open-menu .svg-icon {
	margin-right: 0;
	margin-left: calc(0.25 * var(--global--spacing-unit));
	vertical-align: middle;
}

.menu-button-container .button .dropdown-icon,
.primary-navigation .button .dropdown-icon,
.woo-navigation .button .dropdown-icon {
	display: flex;
	align-items: center;
}

.menu-button-container .button .dropdown-icon .svg-icon,
.primary-navigation .button .dropdown-icon .svg-icon,
.woo-navigation .button .dropdown-icon .svg-icon {
	margin-right: calc(0.25 * var(--global--spacing-unit));
}

.menu-button-container .button .dropdown-icon.open .svg-icon,
.primary-navigation .button .dropdown-icon.open .svg-icon,
.woo-navigation .button .dropdown-icon.open .svg-icon {
	position: relative;
	top: -1px;
}

.menu-button-container .button .hide-visually,
.primary-navigation .button .hide-visually,
.woo-navigation .button .hide-visually {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
.primary-navigation #primary-close-menu, .primary-navigation-open
.woo-navigation #primary-close-menu {
	display: flex;
	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
	margin-top: calc(0.25 * var(--global--spacing-unit));
	margin-left: calc(0.25 * var(--global--spacing-unit));
}

.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
.primary-navigation #woo-close-menu, .woo-navigation-open
.woo-navigation #woo-close-menu {
	display: flex;
	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
	margin-top: calc(0.25 * var(--global--spacing-unit));
	margin-left: calc(0.25 * var(--global--spacing-unit));
}

.woo-navigation-open .menu-button-container #primary-open-menu,
.woo-navigation-open .menu-button-container #woo-open-menu,
.primary-navigation-open .menu-button-container #primary-open-menu,
.primary-navigation-open .menu-button-container #woo-open-menu {
	display: none;
}

.woo-navigation-open .primary-navigation #primary-open-menu,
.primary-navigation-open .primary-navigation #primary-open-menu {
	display: none;
}

.primary-navigation,
.woo-navigation {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--primary-nav--color-text);
	font-size: var(--primary-nav--font-size);
	margin-top: 0;
	margin-bottom: 0;
}

@media only screen and (max-width: 829px) {
	.primary-navigation,
	.woo-navigation {
		width: 100%;
	}
}

.primary-navigation > div,
.woo-navigation > div {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: calc(4* var(--global--spacing-unit)) var(--global--spacing-unit) var(--global--spacing-horizontal);
	background-color: var(--global--color-background);
	overflow-x: hidden;
	overflow-y: scroll;
	transition: all .15s ease-in-out;
	transform: translateY(var(--global--spacing-vertical));
}

@media only screen and (max-width: 829px) {
	.primary-navigation > div,
	.woo-navigation > div {
		z-index: 499;
	}
}

.primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
.woo-navigation > .primary-menu-container {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.has-marketing-bar .primary-navigation,
.has-marketing-bar .primary-navigation > div, .has-marketing-bar
.woo-navigation,
.has-marketing-bar
.woo-navigation > div {
	top: var(--wpcom-marketing-bar--height);
}

.admin-bar .primary-navigation,
.admin-bar .primary-navigation > div, .admin-bar
.woo-navigation,
.admin-bar
.woo-navigation > div {
	top: var(--wpadmin-bar--height);
}

.admin-bar.has-marketing-bar .primary-navigation,
.admin-bar.has-marketing-bar .primary-navigation > div, .admin-bar.has-marketing-bar
.woo-navigation,
.admin-bar.has-marketing-bar
.woo-navigation > div {
	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
}

@media only screen and (min-width: 830px) {
	.primary-navigation,
	.woo-navigation {
		position: relative;
		display: flex;
		justify-content: var(--primary-nav--justify-content);
		margin-top: calc( var(--global--spacing-vertical) * 1.5);
	}
	.primary-navigation > div,
	.woo-navigation > div {
		visibility: visible;
		opacity: 1;
		position: relative;
		padding: 0;
		background-color: transparent;
		overflow: initial;
		transform: none;
	}
	.primary-navigation #toggle-menu,
	.woo-navigation #toggle-menu {
		display: none;
	}
	.primary-navigation > div > ul > li > ul,
	.woo-navigation > div > ul > li > ul {
		display: none;
	}
	.admin-bar.has-marketing-bar .primary-navigation,
	.has-marketing-bar .primary-navigation,
	.admin-bar .primary-navigation, .admin-bar.has-marketing-bar
	.woo-navigation,
	.has-marketing-bar
	.woo-navigation,
	.admin-bar
	.woo-navigation {
		top: initial;
	}
	.admin-bar.has-marketing-bar .primary-navigation > div,
	.has-marketing-bar .primary-navigation > div,
	.admin-bar .primary-navigation > div, .admin-bar.has-marketing-bar
	.woo-navigation > div,
	.has-marketing-bar
	.woo-navigation > div,
	.admin-bar
	.woo-navigation > div {
		top: initial;
	}
}

.primary-navigation div > ul,
.woo-navigation div > ul {
	display: flex;
	justify-content: var(--primary-nav--justify-content);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	max-width: none;
	padding-right: 0;
	position: relative;
	/* Sub-menus Flyout */
}

.primary-navigation div > ul ul,
.woo-navigation div > ul ul {
	padding-right: 0;
}

.primary-navigation div > ul li,
.woo-navigation div > ul li {
	display: block;
	position: relative;
	width: 100%;
	z-index: 1;
}

.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
.woo-navigation div > ul li:hover,
.woo-navigation div > ul li:focus-within {
	cursor: pointer;
	z-index: 99999;
}

@media only screen and (min-width: 830px) {
	.primary-navigation div > ul li,
	.woo-navigation div > ul li {
		display: inherit;
		width: inherit;
		/* Submenu display */
	}
	.primary-navigation div > ul li:hover > ul,
	.primary-navigation div > ul li:focus-within > ul,
	.primary-navigation div > ul li ul:hover,
	.primary-navigation div > ul li ul:focus,
	.woo-navigation div > ul li:hover > ul,
	.woo-navigation div > ul li:focus-within > ul,
	.woo-navigation div > ul li ul:hover,
	.woo-navigation div > ul li ul:focus {
		visibility: visible;
		opacity: 1;
		display: block;
	}
}

.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
	position: relative;
}

@media only screen and (min-width: 830px) {
	.primary-navigation div > ul > li > .sub-menu,
	.woo-navigation div > ul > li > .sub-menu {
		margin: 0;
		background: var(--global--color-background);
		box-shadow: var(--global--elevation);
		right: 0;
		top: calc(100% - (0.5 * var(--primary-nav--padding)));
		min-width: max-content;
		opacity: 0;
		position: absolute;
		transition: all 0.5s ease;
		visibility: hidden;
	}
}

.primary-navigation div > ul > li > .sub-menu .sub-menu,
.woo-navigation div > ul > li > .sub-menu .sub-menu {
	width: 100%;
}

.primary-navigation .primary-menu > .menu-item:hover > a,
.woo-navigation .primary-menu > .menu-item:hover > a {
	color: var(--primary-nav--color-link-hover);
}

.primary-navigation .primary-menu-container > ul > .menu-item,
.woo-navigation .primary-menu-container > ul > .menu-item {
	padding: calc(0.5 * var(--primary-nav--padding)) 0;
}

@media only screen and (min-width: 830px) {
	.primary-navigation .primary-menu-container > ul > .menu-item,
	.woo-navigation .primary-menu-container > ul > .menu-item {
		display: flex;
		align-items: center;
		padding: var(--primary-nav--padding);
	}
}

.primary-navigation .menu-item > a,
.woo-navigation .menu-item > a {
	color: var(--primary-nav--color-link);
}

.primary-navigation .menu-item > a:hover,
.woo-navigation .menu-item > a:hover {
	color: var(--primary-nav--color-link-hover);
	border-color: var(--primary-nav--color-border);
}

.primary-navigation .menu-item > a:focus,
.woo-navigation .menu-item > a:focus {
	color: var(--global--color-secondary);
}

.primary-navigation .menu-item > a:active,
.woo-navigation .menu-item > a:active {
	color: var(--primary-nav--color-link);
}

.primary-navigation a,
.woo-navigation a {
	color: currentColor;
	display: inline;
	font-family: var(--primary-nav--font-family-mobile);
	font-size: var(--primary-nav--font-size-mobile);
	font-weight: var(--primary-nav--font-weight);
}

@media only screen and (min-width: 830px) {
	.primary-navigation a,
	.woo-navigation a {
		display: block;
		font-family: var(--primary-nav--font-family);
		font-size: var(--primary-nav--font-size);
		font-weight: var(--primary-nav--font-weight);
	}
}

.primary-navigation a + svg,
.woo-navigation a + svg {
	fill: currentColor;
}

.primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited,
.woo-navigation a:hover,
.woo-navigation a:link,
.woo-navigation a:visited {
	color: currentColor;
}

.primary-navigation .sub-menu,
.woo-navigation .sub-menu {
	list-style: none;
	margin-right: var(--primary-nav--padding);
}

@media only screen and (min-width: 830px) {
	.primary-navigation .sub-menu,
	.woo-navigation .sub-menu {
		padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
	}
	.primary-navigation .sub-menu > .menu-item > .sub-menu,
	.woo-navigation .sub-menu > .menu-item > .sub-menu {
		padding: 0;
	}
	.primary-navigation .sub-menu > .menu-item.menu-item-has-children,
	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
		padding: calc(0.5 * var(--primary-nav--padding)) 0 0 var(--primary-nav--padding);
	}
}

.primary-navigation .sub-menu .menu-item,
.woo-navigation .sub-menu .menu-item {
	padding-top: calc(0.5 * var(--primary-nav--padding));
	padding-bottom: calc(0.5 * var(--primary-nav--padding));
}

@media only screen and (min-width: 830px) {
	.primary-navigation .sub-menu .menu-item,
	.woo-navigation .sub-menu .menu-item {
		padding-top: calc(0.5 * var(--primary-nav--padding));
		padding-bottom: calc(0.5 * var(--primary-nav--padding));
	}
}

.primary-navigation .sub-menu .menu-item a,
.woo-navigation .sub-menu .menu-item a {
	display: inline;
	font-size: var(--primary-nav--font-size-sub-menu-mobile);
	font-style: var(--primary-nav--font-style-sub-menu-mobile);
}

@media only screen and (min-width: 830px) {
	.primary-navigation .sub-menu .menu-item a,
	.woo-navigation .sub-menu .menu-item a {
		font-size: var(--primary-nav--font-size);
		font-style: var(--primary-nav--font-style);
	}
}

.primary-navigation .menu-item-has-children > .svg-icon,
.woo-navigation .menu-item-has-children > .svg-icon {
	display: none;
}

@media only screen and (min-width: 830px) {
	.primary-navigation .menu-item-has-children > .svg-icon,
	.woo-navigation .menu-item-has-children > .svg-icon {
		display: inline-block;
		height: 100%;
	}
}

.primary-navigation .hide-visually,
.woo-navigation .hide-visually {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

@media only screen and (max-width: 829px) {
	.lock-scrolling .site {
		right: 0;
		max-width: 100%;
		position: fixed;
		left: 0;
	}
}

.navigation-wrapper {
	grid-area: primary-navigation;
	margin: 0;
}

.primary-navigation .primary-menu-container > ul > .menu-item,
.woo-navigation .primary-menu-container > ul > .menu-item {
	padding: 0;
}

@media only screen and (min-width: 830px) {
	.primary-navigation .primary-menu-container > ul > .menu-item,
	.woo-navigation .primary-menu-container > ul > .menu-item {
		padding: 0 var(--primary-nav--padding);
	}
	.primary-navigation .primary-menu-container > ul > .menu-item:last-child,
	.woo-navigation .primary-menu-container > ul > .menu-item:last-child {
		padding-left: 0;
	}
}

@media only screen and (min-width: 830px) {
	.primary-navigation div ul > li > .sub-menu,
	.woo-navigation div ul > li > .sub-menu {
		padding: calc(0.5 * var(--primary-nav--padding)) calc(2 * var(--primary-nav--padding));
		transition: all 0.15s ease;
		text-align: left;
		right: unset;
		left: 0;
	}
	.primary-navigation div ul > li > .sub-menu > .menu-item.menu-item-has-children,
	.woo-navigation div ul > li > .sub-menu > .menu-item.menu-item-has-children {
		padding: calc(0.5 * var(--primary-nav--padding)) 0 0 calc(2 * var(--primary-nav--padding));
	}
}

.woo-navigation {
	padding-right: calc(2 * var(--primary-nav--padding));
}

.social-navigation > div ul li {
	width: auto;
}

@media only screen and (max-width: 829px) {
	div.extra-navigation-wrapper {
		background: var(--primary-nav--color-background);
		padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
		top: 0;
		left: 0;
		bottom: 80px;
		right: 0;
		transform: translateY(90px);
	}
}

.primary-navigation-open div.extra-navigation-wrapper {
	visibility: visible;
	opacity: 1;
	transform: translateY(80px);
}

.primary-navigation-open div.extra-navigation-wrapper .menu-item > a:hover, .primary-navigation-open div.extra-navigation-wrapper .menu-item > a:focus {
	color: #ff6a81;
}

.primary-navigation-open div.extra-navigation-wrapper .menu-item > a:active {
	color: #b2b2b2;
}

.primary-navigation-open .has-logo:not(.has-title-and-tagline) div.extra-navigation-wrapper {
	transform: translateY(calc(var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) )));
	bottom: calc(var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ));
}

.menu-button-container {
	position: relative;
	right: unset;
	top: 0;
	margin-top: 0.25rem;
}

.admin-bar .site-header .menu-button-container,
.has-marketing-bar .site-header .menu-button-container,
.admin-bar.has-marketing-bar .site-header .menu-button-container {
	top: 0;
}

.menu-button-container .button#woo-open-menu {
	margin-top: 0;
}

.admin-bar:not(.primary-navigation-open) .menu-button-container {
	top: unset;
}

.social-navigation {
	grid-area: navigation;
}