/*
  SAJ Studio - desktop header cleanup
  File: public_html/saj-desktop-header.css
  Scope: desktop header only
*/

@media (min-width: 1025px) {
  #root header,
  header {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #root header > div,
  header > div {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: clamp(20px, 1.55vw, 32px) !important;
    padding-left: clamp(24px, 4vw, 88px) !important;
    padding-right: clamp(24px, 4vw, 88px) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  #root header nav,
  header nav,
  #root header nav ul,
  header nav ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(18px, 1.35vw, 28px) !important;
    min-width: 0 !important;
  }

  #root header nav a,
  header nav a,
  #root header nav button,
  header nav button {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    letter-spacing: 0.18em !important;
  }

  #root header > div > a:first-child,
  header > div > a:first-child {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  /* Keep the header logo compact and inside the header row */
  #root header > div > a:first-child img,
  header > div > a:first-child img,
  #root header img,
  header img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 320px !important;
    max-height: 68px !important;
    object-fit: contain !important;
  }

  #root header input[type="search"],
  header input[type="search"],
  #root header input[placeholder*="Søk"],
  header input[placeholder*="Søk"],
  #root header input[placeholder*="søk"],
  header input[placeholder*="søk"],
  #root header input[placeholder*="Search"],
  header input[placeholder*="Search"],
  #root header input[placeholder*="search"],
  header input[placeholder*="search"] {
    width: clamp(145px, 11vw, 190px) !important;
    min-width: 0 !important;
  }

  #root header .saj-header-search,
  header .saj-header-search {
    flex: 0 1 190px !important;
    width: auto !important;
    min-width: 145px !important;
    max-width: 190px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  #root header > div > a:not(:first-child),
  header > div > a:not(:first-child),
  #root header > div > button,
  header > div > button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  #root header > div,
  header > div {
    gap: 14px !important;
  }

  #root header nav,
  header nav,
  #root header nav ul,
  header nav ul {
    gap: 14px !important;
  }

  #root header nav a,
  header nav a,
  #root header nav button,
  header nav button {
    letter-spacing: 0.13em !important;
  }

  #root header .saj-header-search,
  header .saj-header-search {
    flex-basis: 150px !important;
    min-width: 135px !important;
    max-width: 150px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
  }

  #root header input[type="search"],
  header input[type="search"] {
    width: 145px !important;
  }

  #root header > div > a:first-child img,
  header > div > a:first-child img,
  #root header img,
  header img {
    max-height: 62px !important;
  }
}