/*
Theme Name: Toop
Theme URI: https://wordpress.toopweb.nl/
Author: Toop
Author URI: https://wordpress.toopweb.nl/
Description: Theme created by Toop, based on full-site-editing starter themes
Requires at least: 6.1
Tested up to: 6.3
Requires PHP: 7.4
Version: 0.0.1

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toop
Tags: full-site-editing
*/

/*** Navigation menu ***/

/* Set different text color for the menu item equal to the current page */
.wp-block-navigation-item.wp-block-navigation-link.current-menu-item {
  /* the '!important' is required to also work for the mobile (sub)menu! */
  color: var(--wp--preset--color--contrast)!important;
}

/*** Navigation (sub)menu in desktop mode ***/

.wp-block-navigation-submenu ul {
  background-color: var(--wp--preset--color--base)!important;
}

/* Enable both statements below (padding=0, gap>0) to swap padding with gap */
/* vertical padding conflicts with the vertical gap I want instead! */
/*
a.wp-block-navigation-item__content {
  padding: 0;
}

ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
  background-color: blue;
  gap: 10px;
}
*/

/*** Navigation (sub)menu in mobile mode ***/

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--10); 
  background-color: var(--wp--preset--color--base)!important;
  color: var(--wp--preset--color--accent-2)!important
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  padding-top: var(--wp--style--block-gap, 2em);
  gap: var(--wp--style--block-gap, 2em);
}