/* ==========================================================
   BiciPark shared branding v1
   Source visual: approved Route Match mockup.

   IMPORTANT:
   No Leaflet selectors.
   No map markers.
   No Bike Base markers.
   ========================================================== */

:root {
  --bp-brand-logo-ratio: 3.2037;
}

/* ----------------------------------------------------------
   HOMEPAGE
   Existing HTML remains in place and is only visually hidden.
   ---------------------------------------------------------- */

body .topbar .brand {
  width: 164px !important;
  height: 44px !important;
  flex: 0 0 164px !important;
  display: inline-block !important;
  background-image:
    url("../assets/branding/bicipark-logo-route-match.png") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

body .topbar .brand > .brand-mark,
body .topbar .brand > .brand-copy {
  visibility: hidden !important;
}

body .topbar .avatar-pill {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background:
    url("../assets/branding/bicipark-avatar-route-match.png")
    center / cover no-repeat !important;
  box-shadow:
    0 0 0 1px #dce8e1,
    0 4px 12px rgba(29, 69, 47, .13) !important;
  cursor: pointer !important;
}

/* ----------------------------------------------------------
   GLOBAL NAVIGATION
   Replaces only the header brand. The old mark/copy remain
   in the DOM and can be restored by removing this stylesheet.
   ---------------------------------------------------------- */

#bp-global-nav .bp-nav-brand {
  width: 154px !important;
  height: 43px !important;
  flex: 0 0 154px !important;
  display: inline-block !important;
  background-image:
    url("../assets/branding/bicipark-logo-route-match.png") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

#bp-global-nav .bp-nav-brand-mark,
#bp-global-nav .bp-nav-brand-copy {
  visibility: hidden !important;
}

/* Homepage compact mode */
@media (min-width: 1200px) and (max-height: 900px) {
  body .topbar .brand {
    width: 151px !important;
    height: 40px !important;
    flex-basis: 151px !important;
  }

  body .topbar .avatar-pill {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
}

@media (max-width: 920px) {
  #bp-global-nav .bp-nav-brand {
    width: 136px !important;
    height: 39px !important;
    flex-basis: 136px !important;
  }
}