/*******************************
    Main Navigation Structure
*******************************/

/* Hide parent item for column display or mobile menu */
.hide-menu-item {
  display: none;
}

/* Hide on mobile */
@media (max-width: 1049px) {
  .hide-mobile {
    display: none !important;
  }
}

.yk-mobile-menu {
    padding-top: var(--wp--preset--spacing--40);
}

/* Hide on desktop */
@media (min-width: 1050px) {
  .hide-desktop {
    display: none !important;
  }
}


/* Main container and layout */
.yk-mainmenu {
  background-color: #fff !important;
  height: 10rem !important;
}

@media (min-width: 1050px) {
.yk-mainmenu-container {
  margin-top: -3px;
  position: relative; /* required for absolute nav */
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, icons right */
  padding: 0 2rem;
  max-width: 1600px !important;
}

.container-yk-menu > :last-child {
  margin-left: auto !important;
}
}

.yk-mainmenu-spacer {
}


/*******************************
    Logo Styles
*******************************/
.yk-mainmenu-logo svg {
    width: 5rem;   
    height: auto;   
    display: block; 
}

.yk-mobile-nav-logo svg {
	width: 3rem !important;
	}

.yk-mainmenu-logo-img {
}


/*******************************
    Navigation Items
*******************************/
.yk-mainmenu-nav {
    position: relative;
    left: auto;
    transform: none;
    gap: 1.5rem; /* spacing between menu items */
    width: auto; 
}

.yk-mainmenu-item {
    color: var(--wp--preset--color--black) !important;
  font-family: 'akkurat', sans-serif;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: 900 !important;
    letter-spacing: 0.1rem;
    text-transform: none !important;
}

.yk-mainmenu-item.active {
   text-decoration-line: none;
   color: #818181;
}

.kontakt-button {
    background-color: var(--wp--preset--color--yk-secondary);
    color: #fff !important;
    padding: 20px 20px !important;
    border-radius: 5px !important;
    letter-spacing: 1px;
    display: inline-block !important;
    transition: background-color 0.2s ease !important;
}

/*******************************
    Search Component
*******************************/
.yk-mainmenu-search {
}

.yk-search {
  /* Main search container */
}

.yk-search-button {
  /* Search toggle button */
}

.yk-search-icon {
  /* Search icon in button */
}

.yk-search-dropdown {
  /* Search dropdown container */
}

.yk-search-dropdown--open {
  /* Search dropdown when open */
}

.yk-search-form {
  /* Search form container */
}

.yk-search-input {
  /* Search input field */
}

.yk-search-submit {
  /* Submit button */
}

.yk-search-submit-icon {
  /* Icon in submit button */
}

/*******************************
    Hamburger Menu
*******************************/
.yk-hamburger {
}

.yk-hamburger-open {
}

.yk-hamburger-close {
}

/*******************************
    Standard Dropdown Menu
*******************************/
.yk-dropdown-content-scroll {
   margin-top: 2.1em !important;
}


.yk-mainmenu-dropdown {
}

.yk-dropdown-menu {
}

.yk-dropdown-container {
}

.yk-dropdown-header {
}

/* Logo within dropdown */
.yk-dropdown-logo-link {
}

.yk-dropdown-logo {
}

/* Dropdown core components */
.yk-dropdown-wrapper {
}

.yk-dropdown-wrapper--open {
}

.yk-dropdown-bridge {
}

/* Dropdown interactive elements */
.yk-dropdown-button {
  color: var(--wp--preset--color--yk-primary) !important;
}

.yk-dropdown-wrapper .yk-dropdown-button svg {
display: none;
}

.yk-dropdown-button:hover {
}

.yk-dropdown-title {
  position: relative;
  display: inline-block;
  color: var(--wp--preset--color--black) !important;
  font-family: 'akkurat', sans-serif;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1rem;
  text-transform: none !important;
}

/* hover animation */
.yk-dropdown-title:hover::after {
  transform: scaleX(1);
}

.yk-dropdown-arrow {
}

.ml-1 .h-4 .w-4 {
  display: none !important;
}

/*
.yk-dropdown-arrow--open {
display: none  !important;
}
 */

/*******************************
    Dropdown Content Structure
*******************************/
.bg-primary {
    background-color: #ffffff;
}

.yk-dropdown-content {
  color: #fff !important;
  margin-top: 2.1em !important;
}

.yk-dropdown-grid {
background: #ffffff !important;
}

.yk-dropdown-column {
}

/* Parent menu items */
.yk-dropdown-parent {
  color: var(--wp--preset--color--black) !important;
  font-family: 'akkurat', sans-serif;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1rem;
  text-transform: none !important;
}

@media (min-width: 1049px) {
.yk-dropdown-parent, .main-nav-item{
  cursor: default !important;
}}

.yk-dropdown-parent-link {
}

/* Child menu items */
.yk-dropdown-children-wrapper {
}

.yk-dropdown-group {
    color: var(--wp--preset--color--black) !important;
  font-family: 'akkurat', sans-serif;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: 900 !important;
    letter-spacing: 0.1rem;
    text-transform: none !important;
}

.yk-dropdown-child {
  color: var(--wp--preset--color--white);
}

.yk-dropdown-child:hover {
  text-decoration: underline; 
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
}

.yk-dropdown-child-link {
}

/* Remove arrows 
.w-4 {
    display: none;
}
*/

/* Social media section */
.yk-dropdown-social-column {
}

.yk-dropdown-divider {
}

.yk-dropdown-social {
}

.yk-dropdown-spacer {
}

/*******************************
   Icons Search
*******************************/

.yk-search-button {
  background-image: url(https://savinis.ch/wp-content/uploads/2025/01/savinis-menu-icon-search.svg);
  width: 1.75rem;
  background-repeat: no-repeat;
}


.yk-mobile-search-submit {
    background-color: white; 
    margin-right: 5px !important;
    margin-top: 2px !important;
    -webkit-mask-image: url(https://savinis.ch/wp-content/uploads/2025/01/savinis-menu-icon-search.svg);
    mask-image: url(https://savinis.ch/wp-content/uploads/2025/01/savinis-menu-icon-search.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 1.75rem;
}

.w-5 {
  width: 0rem !important;
} 

.rounded-lg {
  border-radius: 0rem !important;
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: #2d2d2a !important;
}

.focus\:ring-0:focus {
  width: 350px !important;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse)) !important;
  margin-left: calc(1rem * calc(0.5 - var(--tw-space-x-reverse))) !important;
}

/*******************************
    Full-Width Dropdown
*******************************/
.yk-mainmenu-dropdown-full {
}

.yk-fullwidth-dropdown {
}

.yk-fullwidth-dropdown-content {
}

.yk-fullwidth-dropdown-inner {
}

.yk-fullwidth-dropdown-grid {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/*******************************
    Usage Examples
*******************************/
/* Full-width dropdown example
.yk-fullwidth-dropdown {
  position: relative !important;
}

.yk-fullwidth-dropdown-content {
  background-color: var(--wp--preset--color--primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.yk-fullwidth-dropdown-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

.yk-fullwidth-dropdown-grid {
  display: grid !important;
  gap: 2rem !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
*/

/* Basic styling example
.yk-mainmenu {
  background-color: #your-color !important;
}

.yk-mainmenu-item {
  color: #your-color !important;
  font-size: 16px !important;
}

.yk-mainmenu-item:hover {
  color: #your-hover-color !important;
}
*/