* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-navy-900: #0b2545;
  --color-blue-700: #1e4e8c;
  --color-blue-500: #3a6ea5;
  --color-blue-100: #e7f0fa;
  --color-blue-sky: #87CEFAFF;
  --color-amber-500: #295a15;
  --color-amber-600: #d9a300;
  --color-cream-50: #fbf8f2;
  --color-ink-900: #14213d;
  --color-ink-600: #52607a;
  --color-white: #ffffff;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container-width: 1120px;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body), ui-serif;
  background-color: var(--color-cream-50);
  color: var(--color-ink-900);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding-bottom: 20px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.bg-body-tertiary {
  width: 100%;
  background-color: var(--color-navy-900) !important;
}

.navbar-brand {
  color: var(--color-white) !important;
}

.nav-link {
  color: var(--color-white) !important;
}

.nav-link i {
  color: var(--color-blue-sky);
}

header .nav-link {
  font-size: 20px;
}

footer .nav-link {
  font-size: 16px;
}

footer .navbar-brand {
  font-size: 16px;
}

/* Listing pages (breweries, beers, establishments, locations, events) */
.page-header {
  padding-block: 3rem 2rem;
}

.page-header h1 {
  font-size: 2rem;
  color: var(--color-navy-900);
}

.card {
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 1px 3px royalblue;
}

.card .card-body {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card .card-body ul {
  padding: 0.5em 1em 0.5em 1em;
  position: relative;
}

.card .card-body ul li {
  line-height: 1.5;
  padding: 0.5em 0.25em;
  list-style-type: none!important;
}

.card .card-body ul li:before {
  font-family: FontAwesome;
  content: "\f138";
  position: absolute;
  left : 0em;
  color: var(--color-blue-sky);
}

.card .card-body a {
  margin-top: auto;
  margin-right: auto;
  padding-left:0;
}

.calendar-links > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Map */
.map {
  height: 560px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-blue-100);
}

.map--small {
  height: 280px;
}

.map--big {
  height: 560px;
}

.map-legend-container {
  position: relative;
  margin-top: 40px;
  z-index: 450;
  width: 100%;
  height: 100%;
}

.map-legend {
  right: 0;
  margin: 10px 10px 1rem;
  position: absolute;
  display: flex !important;
  text-align: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--color-ink-600);
}

.map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.map-legend__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.85rem;
}

.map-legend__swatch--establishment {
  background-color: var(--color-blue-700);
}

.map-legend__swatch--event {
  background-color: var(--color-amber-500);
}

.map-legend__swatch--brewery {
  background-color: var(--color-ink-600);
}

.map-marker {
  display: flex !important;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(11, 37, 69, 0.35);
  font-size: 1.5rem;
}

.map-marker--establishment {
  background-color: var(--color-blue-700);
}

.map-marker--event {
  background-color: var(--color-amber-500);
}

.map-marker--brewery {
  background-color: var(--color-ink-600);
}

#sorting-picker {
  flex-wrap: nowrap;
}

/* Horizontal ASC / DESC toggle */
.sorting-switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  align-self: center;
  width: 40px;
  height: 38px;
  margin-left: 0.5rem;
  background-color: var(--bs-tertiary-bg);
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

/* Hide default HTML checkbox */
.sorting-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* The horizontal track */
.sorting-slider {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3rem;
  cursor: pointer;
  transition: background-color .3s;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

/* The knob, sliding left <-> right */
.sorting-slider:before {
  position: absolute;
  content: "";
  z-index: 0;
  top: 4px;
  left: 3px;
  height: 28px;
  width: 14px;
  background-color: var(--color-white, #fff);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.35);
  transition: transform .3s;
}

.sorting-slider i {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--color-white, #fff);
  transition: color .3s;
}

/* The icon sitting on the knob is the active direction */
.sorting-switch input:not(:checked) + .sorting-slider .fa-arrow-up,
.sorting-switch input:checked + .sorting-slider .fa-arrow-down {
  color: var(--color-blue-700, #2196F3);
}

.sorting-switch input:focus-visible + .sorting-slider {
  box-shadow: 0 0 0 2px var(--color-blue-500, #2196F3);
}

.sorting-switch input:checked + .sorting-slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

.raty {
  display: inline-flex;
  gap: 0.15rem;
  line-height: 1;
  color: var(--color-blue-500);
}

.raty i {
  font-size: 1.15rem;
}

.raty:not([data-read-only="true"]) i {
  cursor: pointer;
}

.raty-filter {
  display: inline-flex;
  gap: 0.15rem;
  line-height: 1;
  flex: 1 1 auto;
  padding: .250rem .50rem;
   color: var(--bs-body-color);
   -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.raty-filter i {
  padding: 5px 1px;
  font-size: 1.15rem;
}

.raty-filter:not([data-read-only="true"]) i {
  cursor: pointer;
}

.promoted-badge {
  position: absolute;
  z-index: 500;
  line-height: 1;
  color: var(--color-blue-500);
  filter: drop-shadow(0 1px 2px rgba(11, 37, 69, 0.35));
  /* The brewery card is covered by a `.stretched-link`; let its clicks through. */
  pointer-events: none;
  transform: rotate(8deg);
}

.promoted-badge-big {
  top: -1.55rem;
  right: -1.55rem;
  font-size: 3rem;
}

.promoted-badge-small {
  top: -0.85rem;
  right: -0.85rem;
  font-size: 1rem;
}

.promoted-badge__seal {
  position: relative;
  z-index: 1;
}

.promoted-badge__ribbon {
  position: absolute;
  bottom: -0.45em;
  z-index: 0;
  font-size: 1em;
  transform-origin: 50% 20%;
}

.promoted-badge__ribbon--left {
  left: 0.3em;
  transform: rotate(20deg);
}

.promoted-badge__ribbon--right {
  right: 0.3em;
  transform: rotate(-20deg);
}