/* PROECO - Header Style 5. Independent stylesheet, 22-10-2026.
   Load from header-5.tpl, not from the IQIT Custom CSS field.
   Scoped to the existing .pq-header-v2 desktop header.
   Mobile header and submenu content are not replaced. */
@media (min-width: 992px) {
  #header #desktop-header .pq-header-v2 {
    --pq-blue: #0066b0;
    --pq-logo: 150px;
    --pq-search: 180px;
    --pq-search-active: 340px;
    --pq-search-panel: 520px;
    --pq-font: 16px;
    --pq-lang-font: 14px;
    --pq-menu-gap: 6px;
    --pq-link-pad: 10px;
    --pq-row-gap: 22px;
    background: #fff !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #header #desktop-header-container {
    width: 100% !important;
    max-width: 1920px !important;
    padding: 0 32px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
  #header #desktop-header-container .pq-header-row {
    display: grid !important;
    grid-template-columns: minmax(var(--pq-logo), 1fr) max-content max-content minmax(var(--pq-search), 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: var(--pq-row-gap) !important;
    min-height: 110px !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    overflow: visible !important;
  }
  #header #desktop-header-container .pq-header-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    flex: none !important;
    width: var(--pq-logo) !important;
    min-width: var(--pq-logo) !important;
    max-width: var(--pq-logo) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #header #desktop-header-container .pq-header-logo #desktop_logo,
  #header #desktop-header-container .pq-header-logo #desktop_logo a {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #header #desktop-header-container .pq-header-logo #desktop_logo img {
    display: block !important;
    width: var(--pq-logo) !important;
    min-width: var(--pq-logo) !important;
    max-width: var(--pq-logo) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  #header #desktop-header-container .pq-header-menu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    flex: none !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #header #desktop-header-container .pq-header-menu #iqitmegamenu-wrapper,
  #header #desktop-header-container .pq-header-menu .container-iqitmegamenu,
  #header #desktop-header-container .pq-header-menu #iqitmegamenu-horizontal,
  #header #desktop-header-container .pq-header-menu #cbp-hrmenu {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  #header #desktop-header-container #cbp-hrmenu > ul {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--pq-menu-gap) !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #header #desktop-header-container #cbp-hrmenu > ul > .cbp-hrmenu-tab {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #header #desktop-header-container #cbp-hrmenu > ul > .cbp-hrmenu-tab > .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 9px var(--pq-link-pad) !important;
    margin: 0 !important;
    color: var(--pq-blue) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: var(--pq-font) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  #header #desktop-header-container #cbp-hrmenu > ul > .cbp-hrmenu-tab > .nav-link .cbp-tab-title {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
    color: inherit !important;
  }
  /* Keep dropdowns readable when the top-level menu becomes compact. */
  #header #desktop-header-container #cbp-hrmenu > ul > .cbp-hrmenu-tab > .cbp-hrsub {
    min-width: 300px !important;
  }
  #header #desktop-header-container #cbp-hrmenu .cbp-submenu-aindicator {
    font-size: 11px !important;
    margin-left: 4px !important;
  }
  #header #desktop-header-container #cbp-hrmenu > ul > .cbp-hrmenu-tab > .nav-link:hover {
    color: #004f89 !important;
  }
  #header #desktop-header-container #cbp-hrmenu #cbp-hrmenu-tab-20 > .nav-link {
    background: var(--pq-blue) !important;
    color: #fff !important;
    padding: 9px 20px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }
  #header #desktop-header-container #cbp-hrmenu #cbp-hrmenu-tab-20 > .nav-link:hover {
    background: #004f89 !important;
    color: #fff !important;
  }
  #header #desktop-header-container .pq-header-actions {
    display: contents !important;
  }
  #header #desktop-header-container .pq-header-language {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header #desktop-header-container .pq-language-widget {
    position: relative !important;
    margin: 0 !important;
    color: var(--pq-blue) !important;
    font-size: var(--pq-lang-font) !important;
    line-height: 1.3 !important;
  }
  #header #desktop-header-container .pq-language-widget > summary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--pq-blue) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: inherit !important;
    white-space: nowrap !important;
    list-style: none !important;
    cursor: pointer;
  }
  #header #desktop-header-container .pq-language-widget > summary::-webkit-details-marker { display: none !important; }
  #header #desktop-header-container .pq-language-widget > summary::marker { content: none !important; }
  #header #desktop-header-container .pq-language-widget .pq-language-label {
    color: var(--pq-blue) !important;
    font-size: inherit !important;
  }
  #header #desktop-header-container .pq-language-widget img {
    display: inline-block !important;
    width: 18px !important;
    height: 12px !important;
    flex: 0 0 18px !important;
    object-fit: cover !important;
  }
  #header #desktop-header-container .pq-language-chevron {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    border-right: 1.5px solid var(--pq-blue) !important;
    border-bottom: 1.5px solid var(--pq-blue) !important;
    transform: rotate(45deg) translateY(-2px) !important;
    margin-left: 2px !important;
  }
  #header #desktop-header-container .pq-language-widget[open] .pq-language-chevron {
    transform: rotate(225deg) !important;
  }
  #header #desktop-header-container .pq-language-widget .pq-language-options {
    display: none !important;
    position: absolute !important;
    z-index: 5000 !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    width: max-content !important;
    min-width: 145px !important;
    padding: 5px !important;
    margin: 0 !important;
    list-style: none !important;
    background: #fff !important;
    border: 1px solid #dfe9f2 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%) !important;
  }
  #header #desktop-header-container .pq-language-widget[open] .pq-language-options { display: block !important; }
  #header #desktop-header-container .pq-language-options li { margin: 0 !important; padding: 0 !important; }
  #header #desktop-header-container .pq-language-options a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    color: var(--pq-blue) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
  }
  #header #desktop-header-container .pq-language-options a:hover { background: #eaf4fa !important; }
  #header #desktop-header-container .pq-header-search {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: block !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }
  #header #desktop-header-container .pq-header-search form,
  #header #desktop-header-container .pq-header-search .input-group {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #header #desktop-header-container .pq-header-search .form-search-control {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 36px 0 13px !important;
    border: 1px solid var(--pq-blue) !important;
    border-radius: 999px !important;
    color: #333 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }
  #header #desktop-header-container .pq-header-search .search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    width: 30px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--pq-blue) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #header #desktop-header-container .pq-header-search .search-btn .fa {
    color: inherit !important;
    font-size: 15px !important;
  }
  #header #desktop-header-container .nav-link:focus-visible,
  #header #desktop-header-container summary:focus-visible,
  #header #desktop-header-container .form-search-control:focus-visible {
    outline: 2px solid var(--pq-blue) !important;
    outline-offset: 3px !important;
  }
}
@media (min-width: 1200px) and (max-width: 1439.98px) {
  #header #desktop-header .pq-header-v2 {
    --pq-logo: 150px;
    --pq-search: 146px;
    --pq-font: 14px;
    --pq-lang-font: 13px;
    --pq-menu-gap: 3px;
    --pq-link-pad: 7px;
    --pq-row-gap: 14px;
  }
  #header #desktop-header-container { padding: 0 20px !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header #desktop-header .pq-header-v2 {
    --pq-logo: 150px;
    --pq-search: 96px;
    --pq-font: 13px;
    --pq-lang-font: 12px;
    --pq-menu-gap: 2px;
    --pq-link-pad: 4px;
    --pq-row-gap: 9px;
  }
  #header #desktop-header-container { padding: 0 16px !important; }
  #header #desktop-header-container .pq-header-row { min-height: 100px !important; }
  #header #desktop-header-container #cbp-hrmenu #cbp-hrmenu-tab-20 > .nav-link { padding: 9px 14px !important; }
  #header #desktop-header-container .pq-header-search .form-search-control { font-size: 16px !important; }
}
@media (min-width: 992px) and (max-width: 1059.98px) {
  #header #desktop-header .pq-header-v2 {
    --pq-search: 84px;
    --pq-menu-gap: 1px;
    --pq-link-pad: 3px;
    --pq-row-gap: 7px;
  }
}

/* Main navigation: 18px on wide desktops; keep responsive sizes below. */
@media (min-width: 1600px) {
  #header #desktop-header .pq-header-v2 {
    --pq-font: 18px;
  }
}

/* Search refinement: unchanged search behavior; compact desktop menu.
   The search field expands only inside its existing grid track, so it
   never pushes or covers the menu/language selector. Results have their
   own wider panel. The native IQIT autocomplete controls visibility,
   keyboard navigation and links; no replacement JavaScript is required. */
@media (min-width: 992px) {
  #header #desktop-header-container .pq-header-search #search_widget {
    display: block !important;
    position: relative !important;
    width: var(--pq-search) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #header #desktop-header-container .pq-header-search #search_widget:focus-within {
    width: 100% !important;
    max-width: var(--pq-search-active) !important;
    z-index: 5001 !important;
  }

  /* Hide only the placeholder; typed text and the magnifier stay visible. */
  #header #desktop-header-container .pq-header-search .form-search-control::placeholder {
    color: transparent !important;
    opacity: 0 !important;
  }

  /* Native autocomplete panel: right edge aligned with the search field. */
  #header #desktop-header-container .pq-header-search .autocomplete-suggestions {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(var(--pq-search-panel), calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(520px, calc(100vh - 130px)) !important;
    padding: 6px !important;
    margin: 0 !important;
    border: 1px solid #dce6ef !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #333 !important;
    box-shadow: 0 12px 32px rgb(0 0 0 / 15%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    box-sizing: border-box !important;
    z-index: 5002 !important;
    text-align: left !important;
    /* Do not force display:block: IQIT must show/hide its own results. */
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion {
    width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f5 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    cursor: pointer;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion:last-child {
    border-bottom: 0 !important;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion:hover,
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion.selected {
    background: #eef6fc !important;
    color: #0066b0 !important;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion > .row {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion .col-img {
    flex: 0 0 72px !important;
    width: 72px !important;
    max-width: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion .col-img img {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion > .row > .col:not(.col-img):not(.col-shop) {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion .name {
    display: block !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion .col-shop {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 82px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #687887 !important;
    white-space: normal !important;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion-show-all {
    padding: 14px 12px !important;
    background: #f4f8fc !important;
    color: #0066b0 !important;
    text-align: center !important;
  }
  #header #desktop-header-container .pq-header-search .autocomplete-suggestion-show-all .name {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}
