.main-navigation{
  grid-area: search-bar;
}

/*imitate the header-inner__container*/
.region--main-navigation{
  max-width: calc(var(--default-max-width) - var(--header-padding) * 3);
  margin: 0 auto;

  /* margin: 0 auto; */
  display: flex;
  justify-content: flex-end; /* Right align the entire navigation container */

}

/* we don't need the search button in the search bar */
.search-block-form .form-actions{
  display: none;
}


/* Search input specific styles */
input[type="search"] {
  border: 1px solid white;
  min-width: 320px;
  min-height: 44px;
  background: transparent;
  
  color: white;
  padding: 0.5rem 2.75rem 0.5rem 2.5rem; /* leave space for icon */
}

input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

input[type="search"]:focus {
  outline: none;
  border-color: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15) inset;
}

input[type="search"]::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.95);
  opacity: 1;
}
  
/* mobile: full-width field */
@media (max-width: 768px) {
  .search-block-form{
    width: 100%;
    min-width: 100px;
    justify-content: center;
  }
  #search-block-form--2{
    width: 100%;
  }
  #search-block-form--2 input[type="search"],
  #search-block-form--2 .form-search {
    min-width: 100%;
    width: 100%;
    font-size: 1rem;
    min-width: 330px;
    min-height: 44px;
  }
}


  
@media (max-width: 768px) {
  #block-norlabtheme-search-form-wide {
    justify-content: center; /* Center on mobile */
    width: 100%;
  }
}



/* Responsive search input */
@media (max-width: 768px) {
  #edit-keys--2 {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  #search-block-form--2 {
    flex-direction: column;
    align-items: stretch;
    justify-content: center; /* Center on mobile */
  }
}

/* left search icon using background svg */
#search-block-form--2 input[type="search"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 20px 20px;
}

/* Hide search form when mobile navigation is active */
@media (max-width: 768px) {
  .header-nav.is-active ~ .main-navigation,
  .header-nav.is-active + .main-navigation,
  .header-nav.is-active .main-navigation {
    display: none !important;
  }
  
  /* Alternative: Hide search form when mobile nav is open */
  body.is-overlay-active .main-navigation,
  body.is-fixed .main-navigation {
    display: none !important;
  }
  
  /* Hide search form in mobile navigation context */
  .header-nav .search-block-form,
  .header-nav .main-navigation {
    display: none !important;
  }
  

}

#views-exposed-form-knowledge-block-1{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* 知识库搜索表单移动端样式 */
@media (max-width: 768px) {
  #views-exposed-form-knowledge-block-1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    padding: 0 20px; /* 与header的padding保持一致 */
    width: 100%;
    box-sizing: border-box;
  }

  #views-exposed-form-knowledge-block-1 .form-item-combine {
    background-color: transparent;
  }



  #views-exposed-form-knowledge-block-1 .form-actions {
    border: 1px solid transparent;
    margin-right: 1rem;
  }

  .form-wrapper {
    width:0;
  }


}

@media (max-width: 480px) {
  #views-exposed-form-knowledge-block-1 {
    padding: 0 20px; /* 保持与header一致 */
    gap: 0.5rem;
  }

  #views-exposed-form-knowledge-block-1 #edit-combine {
    padding: 0.5rem;
    font-size: 0.95rem;
  }

  #views-exposed-form-knowledge-block-1 #edit-submit-knowledge {
    min-width: 45px;
    min-height: 45px;
    padding: 0.4rem 0.8rem;
    font-size: 1.3rem;
  }
}

.form--inline .form-actions {
  margin-top: 1rem;
}

[type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea {

  border: 1px solid white;
  /* border-radius: var(--border-radius); */
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
}