/* ==========================================================
   Zoekbalk (yooker_search shortcode, koppelt aan Advanced Woo
   Search via [aws_search_form])
   ========================================================== */

/* ========================================
   YOOKER - AWS SEARCH
======================================== */

.yooker-aws-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ========================================
   SEARCH BUTTON
======================================== */
@media (min-width: 768px) {
  .yooker-search-toggle {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 55px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #a69984;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  /* Font Awesome search icon */

  .yooker-search-toggle i {
    font-size: 26px;
    line-height: 1;
    font-weight: 400;
  }

  /* Hover */

  .yooker-search-toggle:hover {
    color: #887b67;
  }

  /* Geen standaard button focus */

  .yooker-search-toggle:focus {
    outline: none;
  }

  /* ========================================
   SEARCH FORM
======================================== */

  .yooker-search-form {
    position: absolute;
    top: 50%;
    right: 0;
    width: 350px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(10px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;
    z-index: 9999;
  }

  /* Search open */

  .yooker-aws-search.is-open .yooker-search-form {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
  }

  /* Search button verbergen als zoekveld open staat */

  .yooker-aws-search.is-open .yooker-search-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* ========================================
   AWS INPUT
======================================== */

  .yooker-aws-search .aws-container {
    width: 100%;
  }

  .yooker-aws-search .aws-search-form {
    height: 50px;
  }

  .yooker-aws-search .aws-search-field {
    width: 100%;
    height: 50px;
    padding: 0 50px 0 18px !important;
    background: #fff;
    border: 1px solid #a69984 !important;
    border-radius: 0;
    font-size: 16px;
    box-shadow: none !important;
    outline: none;
  }

  /* AWS zoekicoon/button */

  .yooker-aws-search .aws-search-btn {
    width: 50px;
    background: transparent !important;
    border: 0 !important;
    color: var(--color-alt-content-link);
  }
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {
  .yooker-aws-search {
    display: block;
    width: 100%;
  }

  /* Gouden toggle niet tonen */
  .yooker-search-toggle {
    display: none !important;
  }

  /* AWS form altijd zichtbaar */
  .yooker-search-form {
    position: static;

    display: block;
    width: 100%;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: none;

    z-index: auto;
  }
}


/* Tablet (768-1024px): zoekveld staat in eigen rij in de header, daar altijd tonen als balk (zoals op mobiel) */
@media (min-width: 768px) and (max-width: 1024px) {
  .l-subheader.at_bottom .yooker-aws-search { display: block; width: 100%; }
  .l-subheader.at_bottom .yooker-search-toggle { display: none !important; }
  .l-subheader.at_bottom .yooker-search-form { position: static; display: block; width: 100%; opacity: 1; visibility: visible; pointer-events: auto; transform: none; z-index: auto; }
}

/* Tablet: ruimte rond de zoekbalk */
@media (min-width: 768px) and (max-width: 1024px) {
  .l-subheader.at_bottom .yooker-aws-search { padding: 0.7rem 0; }
  .l-subheader.at_bottom, .l-subheader.at_bottom .l-subheader-h, .l-subheader.at_bottom .l-subheader-cell { height: auto !important; }
}

/* Kleine laptop / iPad Pro (1025-1280px): menu compacter zodat logo, menu en icoontjes op 1 regel passen */
@media (min-width: 1025px) and (max-width: 1280px) {
  .l-subheader.at_middle .w-nav.type_desktop .w-nav-list.level_1 > .menu-item > .w-nav-anchor { padding-left: 0.4rem !important; padding-right: 0.4rem !important; font-size: 15px !important; }
}