/**
 * Header layout overrides (desktop): thinner bar, nav at bottom, centered longer search.
 * Applies when .header-search-center is present in the header.
 */

@media (min-width: 1200px) {
  /* Thinner header */
  .tf-header {
    padding-top: 8px;
    /* padding-bottom: 8px; */
  }

  /* header-inner and header-center are siblings under container-full */
  .tf-header .container-full {
    display: flex;
    flex-direction: column;
  }

  .tf-header .header-inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 0;
    padding-bottom: 8px;
  }

  /* Row 1: logo | search (center, long) | icons */
  .tf-header .box-open-menu-mobile {
    order: 0;
  }
  .tf-header .header-left {
    order: 1;
    flex: 0 0 auto;
  }
  .tf-header .header-search-wrap {
    order: 2;
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 520px;
    margin-left: 24px;
    margin-right: 24px;
  }
  .tf-header .header-search-wrap .header-search-center {
    margin: 0;
  }
  .tf-header .header-search-center fieldset input,
  .tf-header .header-search-wrap .form-search-nav fieldset input {
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .tf-header .header-right {
    order: 3;
    flex: 0 0 auto;
  }

  /* Row 2: header-center same level as header-inner, padding left/right 15px */
  .tf-header .header-center {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0px 15px;
    /* border-top: 1px solid var(--border-color, #eee); */
  }

  /* Nav in its own box so height can be adjusted independently */
  .tf-header .header-nav-box {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .tf-header .header-center .box-navigation {
    width: auto;
  }
  .tf-header .header-center .box-nav-menu {
    gap: 16px;
    align-items: center;
  }

  /* Thinner nav links (adjust padding to make nav box thinner) */
  .tf-header .header-nav-box .item-link {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* Header search wrap: position for dropdown */
.tf-header .header-search-wrap {
  position: relative;
}

/* Search dropdown panel: below the search bar (new UI, not modal) */
.search-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--white, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  z-index: 1060;
  max-height: min(85vh, 560px);
  overflow-y: auto;
}

.search-dropdown-panel-inner {
  padding: 20px 24px 24px;
}

.search-dropdown-panel .search-feature,
.search-dropdown-panel .recently-view {
  margin-bottom: 20px;
}

.search-dropdown-panel .recently-view:last-child {
  margin-bottom: 0;
}

/* Content wrapper (used by ContentWrapper.vue): left/right padding for content below the header.
   To adjust site-wide, set the variable on :root, e.g.:
   :root { --content-wrapper-padding-x: 48px; }
   Or pass padding-x prop to ContentWrapper on a page. */