/*
 * Navigation block: the header menu, its dropdowns, the menu button and the
 * mobile menu (parts/mobile-menu.html, shown in the Navigation overlay).
 *
 * Loaded with the Navigation block (functions.php). Type and colour are in
 * theme.json (styles.blocks.core/navigation); this file overrides core's own
 * Navigation CSS, which theme.json's `css` can't: that is wrapped in :where().
 */

/* Divi's hover fades the item; the current page and its parent are crimson. */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	opacity: 0.7;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--crimson);
}

/*
 * The sub-menu toggle (the chevron a keyboard or a touch screen opens the
 * dropdown with): core draws it 0.6em square, about 10px. It gets a 24px hit
 * area around the same chevron (WCAG 2.2, 2.5.8), and the theme's focus ring,
 * as do the menu and close buttons, which core leaves to the browser.
 */
.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	margin: -7px -7px -7px 0;
	padding: 7px;
}

.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon svg {
	width: 10px;
	height: 10px;
	margin-top: 0;
}

/*
 * A dropdown's item is one button, its word and its chevron (the desktop
 * menu's "Open on click", small fix 22, 2026-11-12): on a touch screen
 * hover opens nothing, and the word alone was no target. The chevron sits
 * in the button's right padding, so the item is as wide as before.
 */
.wp-block-navigation .wp-block-navigation__container > .has-child.open-on-click > .wp-block-navigation-submenu__toggle {
	padding-right: 24px;
}

.wp-block-navigation .wp-block-navigation__container > .has-child.open-on-click > .wp-block-navigation__submenu-icon {
	margin-left: -24px;
	pointer-events: none;
}

/* The desktop menu's items are 44px-tall targets; the look doesn't move. */
.sutherland-main-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	margin-block: -12px;
	padding-block: 12px;
}

.wp-block-navigation .wp-block-navigation__submenu-icon:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation-overlay-close:focus-visible {
	outline: 2px solid var(--wp--custom--color--focus);
	outline-offset: 2px;
}

/*
 * Dropdowns: a 240px white panel with a 3px crimson top rule. The rule stays
 * straight under the header; the panel's bottom corners are rounded.
 */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	width: 240px;
	padding: 20px 0;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--crimson);
	border-radius: 0 0 var(--wp--preset--border-radius--large) var(--wp--preset--border-radius--large);
	box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	min-width: 240px;
}

/* As specific as core's rule for this padding; this file loads after core's. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container
.wp-block-navigation-item .wp-block-navigation-item__content {
	padding: 9px 40px;
}

/* They open under their item's left edge, even in a right-aligned menu. */
.wp-block-navigation.items-justified-right .wp-block-navigation__container
.has-child .wp-block-navigation__submenu-container {
	right: auto;
	left: 0;
}

/* The menu button: Divi's crimson "hamburger", 32px. */
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--crimson);
}

.wp-block-navigation__responsive-container-open svg {
	width: 32px;
	height: 32px;
}

/*
 * Mobile menu: the header bar again (mark and close button), then the menu
 * panel under a crimson rule, as Divi's drop-down panel looks. Core opens
 * every sub-menu in the overlay, so they are listed open, indented.
 */
.sutherland-mobile-menu {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/*
 * It fills the window: no rounded corners. One class stronger than
 * theme.json's rule, which rounds every Group that has a background.
 */
.wp-block-group.sutherland-mobile-menu {
	border-radius: 0;
}

.sutherland-mobile-menu > .wp-block-group:first-child {
	align-items: center;
}

.sutherland-mobile-menu .wp-block-navigation-overlay-close {
	padding: 0;
	color: var(--wp--preset--color--crimson);
}

.sutherland-mobile-menu .wp-block-navigation-overlay-close svg {
	width: 32px;
	height: 32px;
}

.sutherland-mobile-menu > .wp-block-group:last-child {
	margin-block-start: 0;
	padding: 5%;
	border-top: 3px solid var(--wp--preset--color--crimson);
	border-radius: 0 0 var(--wp--preset--border-radius--large) var(--wp--preset--border-radius--large);
	box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.sutherland-mobile-menu .wp-block-navigation {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-transform: none;
}

.sutherland-mobile-menu .wp-block-navigation__container,
.sutherland-mobile-menu .wp-block-navigation-item {
	display: block;
}

.sutherland-mobile-menu .wp-block-navigation-item {
	min-width: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sutherland-mobile-menu .wp-block-navigation-item__content,
.sutherland-mobile-menu
.has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 10px 5%;
}

.sutherland-mobile-menu
.wp-block-navigation .wp-block-navigation__submenu-container {
	position: static;
	display: block;
	width: auto;
	min-width: 0;
	padding: 0 0 0 20px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.sutherland-mobile-menu
.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.sutherland-mobile-menu p {
	margin: 0;
}

/*
 * Donate first, as a crimson button across the panel, in the DONATE tab's
 * type; the search under it (search.css).
 */
.sutherland-mobile-menu p a {
	display: block;
	padding: 12px 5% 10px;
	border-radius: var(--wp--preset--border-radius--small);
	background: var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--white);
	font-size: 17px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--wp--custom--transition--button);
}

.sutherland-mobile-menu p a:hover {
	background: var(--wp--preset--color--navy);
}