/*
Theme Name: Twenty Twenty-Five Child
Description: A child theme of Twenty Twenty-Five.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/

/* Stacked main navigation with coloured arrow accents. */
nav.main-menu {
	width: 150px;
	max-width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	position: absolute;
	top:3.325rem;
	left:0;
}

nav.main-menu :is(.wp-block-navigation__container, ul.menu),
nav.main-menu > ul {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 240px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	color:white;
}

.dark {
	color:#555;
}

:root :where(.is-layout-flow) > * {
	margin-top:0;
}

nav.main-menu :is(.wp-block-navigation__container, ul.menu) > li,
nav.main-menu > ul > li {
	--menu-background: #9bcff2;
	--menu-accent: #ffcf00;
	--menu-text: #555;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

nav.main-menu :is(.wp-block-navigation__container, ul.menu) > li:nth-child(4n + 2),
nav.main-menu > ul > li:nth-child(4n + 2) {
	--menu-background: #a00068;
	--menu-accent: #f7a9c4;
	--menu-text: #fff;
}

nav.main-menu :is(.wp-block-navigation__container, ul.menu) > li:nth-child(4n + 3),
nav.main-menu > ul > li:nth-child(4n + 3) {
	--menu-background: #df007e;
	--menu-accent: #ff801b;
	--menu-text: #fff;
}

nav.main-menu :is(.wp-block-navigation__container, ul.menu) > li:nth-child(4n + 4),
nav.main-menu > ul > li:nth-child(4n + 4) {
	--menu-background: #075083;
	--menu-accent: #a00068;
	--menu-text: #fff;
}

nav.main-menu :is(.wp-block-navigation__container, ul.menu) > li > a,
nav.main-menu > ul > li > a {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	padding: 12px 28px 12px 40px;
	background: var(--menu-background);
	color: var(--menu-text);
	font: inherit;
	text-align: right;
	text-decoration: none;
	text-transform: uppercase;
}

nav.main-menu :is(.wp-block-navigation__container, ul.menu) > li > a::before,
nav.main-menu > ul > li > a::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 30px;
	background: var(--menu-accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";
	pointer-events: none;
}

nav.main-menu :is(.wp-block-navigation__container, ul.menu) > li > a:hover,
nav.main-menu > ul > li > a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

nav.main-menu a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -5px;
}