/**
 * Zuto navbar tab icons keep their own colour on the dark bar,
 * and the home / header search stretches across the screen.
 */

body[data-zuto-vertical] #navbar #navMenu > li > a.nav-link,
body[data-zuto-vertical] .ze-nav-menu > li > a.ze-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

html body.erp-body[data-zuto-vertical] #navbar #navMenu > li > a.nav-link > i[data-zuto-nav-icon],
html body.erp-body[data-zuto-vertical="holidays"] #navbar #navMenu > li > a.zh-nav-link > i[data-zuto-nav-icon],
body[data-zuto-vertical] #navbar #navMenu > li > a.nav-link > i[data-zuto-nav-icon],
body[data-zuto-vertical] .ze-nav-menu > li > a.ze-nav-link > i[data-zuto-nav-icon] {
  display: inline-block !important;
  flex: 0 0 auto;
  color: var(--zuto-nav-icon-color, #38bdf8) !important;
  -webkit-text-fill-color: var(--zuto-nav-icon-color, #38bdf8) !important;
  font-size: 0.95rem;
  line-height: 1;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Home search columns use the screen, with the section's own side padding. */
body[data-zuto-vertical="classified"] .zc-home-inner,
body[data-zuto-vertical="auto"] .za-home-inner,
body[data-zuto-vertical="property"] .zp-home-inner,
body[data-zuto-vertical="directory"] .zb-home-inner,
body[data-zuto-vertical="holidays"] .zh-hero-inner,
body[data-zuto-vertical="entertainment"] .ze-header-inner {
  max-width: none !important;
  width: 100% !important;
}

body[data-zuto-vertical="classified"] .zuto-classified-search,
body[data-zuto-vertical="auto"] .za-spec,
body[data-zuto-vertical="property"] .zp-search,
body[data-zuto-vertical="directory"] .zb-finder,
body[data-zuto-vertical="holidays"] .zh-search,
body[data-zuto-vertical="entertainment"] .ze-search {
  width: 100% !important;
  max-width: none !important;
}

body[data-zuto-vertical="entertainment"] .ze-header-inner {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

/* Search Elinom under the Zuto tabs fills the row beside the account cluster. */
@media (min-width: 901px) {
  html body.erp-body.erp-body[data-zuto-vertical] #navbar #util-bar #utilAiSearchSlot,
  html body.erp-body.erp-body[data-zuto-vertical] #navbar #util-bar .util-ai-search-slot,
  html body.erp-body.erp-body[data-zuto-vertical="holidays"] #navbar #util-bar #utilAiSearchSlot,
  html body.erp-body.erp-body[data-zuto-vertical="holidays"] #navbar #util-bar .util-ai-search-slot {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0.75rem 0 0 !important;
  }

  html body.erp-body[data-zuto-vertical] #navbar #util-bar #us-trigger,
  html body.erp-body[data-zuto-vertical] #navbar #util-bar .us-trigger {
    width: 100% !important;
    max-width: none !important;
  }
}