/*
Theme Name: Spinoko Child
Theme URI: https://dinomatic.com/spinoko
Author: DinoMatic
Author URI: https://dinomatic.com
Template: spinoko
Description: Spinoko: Child Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spinoko-child
*/

/** ADDITIONAL NAVIGATION **/
.additional-menu {
	  /**
	   *    * 💁 adjust colors below, use any color value
	   *       * or leave unchanged for default values
	   *          **/
  --color-links: var(--color-light);
    --color-links-hover: var(--color-link);
      --color-submenu-bg: var(--color-dark);

        /**
	 *    * 💁 use inline-block to enable icons next to parent menu items
	 *       * or none to disable it, no quotes
	 *          **/
  --icon-display: inline-block;

    display: none;
    }

    .site-header .site-search {
	      padding-right: 1rem;
      }

      @media (min-width: 1024px) {
	        .additional-menu {
			    display: flex;
			      }

			        /**
				 *    * 💁 remove 2 below rules if you want to keep main (hamburger) navigation
				 *       * with the additional one on large screens
				 *          **/
  .main-navigation {
	      display: none;
	        }

		  .site-header .site-search {
			      padding-right: 0;
			        }
			}

			.additional-menu>li {
				  position: relative;
				    padding: 0 0.5rem;
			    }

			    .additional-menu li a {
				      color: var(--color-links);
				        transition: all .3s ease-in-out;
				}

				.additional-menu li:hover>a,
				.additional-menu li a:hover {
					  color: var(--color-links-hover);
				  }

				  .additional-menu ul {
					    position: absolute;
					      top: calc(100% + 2rem);
					        right: 9999rem;
						  width: 12rem;
						    z-index: 1;
						      opacity: 0;
						        padding: 0.5rem 0;
							  background: var(--color-submenu-bg);
							    border-radius: 0.4rem;
							      transform: translateY(0.6rem);
							        transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
							}

							.additional-menu li.menu-item-has-children:hover>ul,
							.additional-menu li.menu-item-has-children:focus>ul {
								  right: 0;
								    opacity: 1;
								      transform: translateY(0);
								        transition: opacity 0.15s linear, transform 0.15s linear;
								}

								.additional-menu ul::before,
								.additional-menu ul::after {
									  content: "";
									    display: block;
									      position: absolute;
									        bottom: 100%;
									}

									.additional-menu ul::before {
										  height: 2rem;
										    left: 0;
										      right: 0;
									      }

									      .additional-menu ul::after {
										        border: 0.8rem solid transparent;
											  border-bottom-color: var(--color-submenu-bg);
											    right: 1.8rem;
										    }

										    .additional-menu ul a {
											      display: block;
											        width: 100%;
												  padding: .25rem 1rem;
												    color: inherit;
											    }

											    .additional-menu ul li.menu-item-has-children>a {
												      padding-right: 4.5rem;
											      }

											      .additional-menu li.menu-item-has-children>a:after {
												        content: '';
													  display: var(--icon-display);
													    width: 0.25rem;
													      margin-left: 0.25rem;
													        padding-bottom: 2px;
														  border-top: 0.25rem solid var(--color-links);
														    border-bottom: 0 none;
														      border-right: 0.25rem solid transparent;
														        border-left: 0.25rem solid transparent;
															  transition: border 0.15s ease-in-out;
														  }

														  .additional-menu li.menu-item-has-children:hover>a:after {
															    border-top-color: var(--color-links-hover);
														    }

														    .additional-menu ul ul {
															      top: 0;
														      }

														      .additional-menu ul li.menu-item-has-children:hover>ul,
														      .additional-menu ul li.menu-item-has-children:focus>ul {
															        right: calc(100% + 2rem);
															}

															.additional-menu ul ul::before {
																  top: 0;
																    bottom: 0;
																      right: -2rem;
																        left: auto;
																	  width: 2rem;
																	    height: auto;
																    }

																    .additional-menu ul ul::after {
																	      top: 0.75rem;
																	        bottom: auto;
																		  right: -1.6rem;
																		    border-bottom-color: transparent;
																		      border-left-color: var(--color-submenu-bg);
																	      }