/*
* ===================================================
*     CUSTOM CSS CODE BELOW
* ===================================================
*/

/* Header med bakgrunnsbilde */
.header-banner {
  background-color: #f6ece8;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  min-height: 210px;
  display: flex;
  align-items: flex-start;
}
.header-banner > .container { width: 100%; }
.header-banner .navbar { align-items: flex-start; }

/* Luft rundt innholdet, hvit halvgjennomsiktig bakgrunn for lesbarhet */
.header-banner .navbar-brand { background: rgba(255,255,255,.78); border-radius: 10px; padding: .4rem .8rem !important; }
.header-banner .search-wrapper { background: #fff; border-radius: 999px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.header-banner .search-wrapper .form-control { background: #fff; }
.header-banner .search-wrapper .btn { background: #fff !important; }
.header-banner .header-tagline,
.header-banner .header-tagline-mobile {
  background: rgba(255,255,255,.82);
  border-radius: 999px;
  padding: .15rem .8rem;
  width: auto;
  display: inline-block;
  opacity: 1 !important;
}
.header-banner .navbar > ul.list-inline > li > a,
.header-banner .navbar > div > a.color-text-base {
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: .45rem .8rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

@media (min-width: 992px) {
  .header-banner { align-items: stretch; }
  .header-banner > .container { display: flex; }
  .header-banner > .container > .row { flex: 1 1 auto; }
  .header-banner .navbar { height: 100%; align-items: flex-end; justify-content: flex-end; padding-bottom: 1rem !important; }
  .header-banner .navbar-brand { align-self: flex-start; margin-right: auto; }
  .header-banner .navbar > ul.list-inline { margin-bottom: .4rem !important; }
  .header-banner { min-height: 0; aspect-ratio: 1600 / 520; background-size: cover; background-position: center center; }
  .header-banner .navbar-brand { display: none !important; }
  /* Søk til høyre, ved siden av handlekurv, så bildets midtparti er fritt */
  .header-banner .top-searchbar { flex-grow: 0 !important; margin-left: auto; width: 360px; max-width: 360px; }
  .header-banner .navbar { position: relative; }
  .header-banner .top-searchbar { position: absolute; right: 15px; bottom: 4.2rem; width: 300px; max-width: 300px; padding: 0 !important; margin: 0; }
  .header-banner .top-searchbar .header-tagline { display: none !important; }
}
@media (min-width: 1300px) {
  .header-banner .top-searchbar { right: -90px; }
  .header-banner .navbar > ul.list-inline { transform: translateX(90px); }
}
@media (min-width: 992px) {
  .header-banner .header-tagline { text-align: center; }
}

@media (max-width: 991.98px) {
  .header-banner .navbar > div.d-lg-none > a { display:inline-flex; background: rgba(255,255,255,.85); border-radius: 999px; padding: .45rem .6rem; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
  .header-banner { min-height: 0; height: auto; aspect-ratio: 1600 / 720; background-size: 100% 100%; background-position: center center; position: relative; }
  .header-banner .container { padding-left: 10px; padding-right: 10px; }
  .header-banner .navbar-brand { display: none !important; }
  .header-banner .header-search-mobile { position: absolute; left: 12px; right: 12px; bottom: 8px; width: auto !important; margin: 0 !important; }
  .header-banner .header-search-mobile .form-control { height: 38px; }
  .header-banner .navbar { position: static; }
  .header-banner .header-tagline-mobile { display: none !important; }
}