/**
 * Responsive embedded iframe map. The iframe is assumed to be 600x450 (but any
 * dimension should be fine as long as the aspect ratio is 4:3).
 *
 * <div class="map">
 *   <iframe class="map__iframe" src="..." width="600" height="450" ...></iframe>
 * </div>
 *
 * 1. Necessary amount of padding for a 4:3 iframe (3/4 == 0.75)
 * 2. The map is embedded in a Bootstrap-controlled flex div. Explicit width is
 *    required.
 */

.map {
  overflow: hidden;
  padding-top: 75%;
  position: relative;
  width: 100%;
}

.map__iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/**
 * Bottom panel for contact links.
 *
 * 1. Flush all the way to the bottom.
 * 2. Small font size to fit the phone numbers.
 * 3. Fixed height. The body should have a bottom margin/padding to compensate
 *    for the space occupied by this panel.
 */

.bottom-panel {
  background: #ccc;
  bottom: 0; /* 1 */
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
  display: flex;
  font-size: 1rem; /* 2 */
  height: 4rem; /* 3 */
  left: 0; /* 1 */
  position: fixed; /* 1 */
  width: 100vw; /* 1 */
}

body {
  padding-bottom: 4rem; /* 3 */
}

/**
 * Hide the bottom panel for wide enough viewports. It's probably better to use
 * browser detection to hide the bottom panel, but this is good enough.
 */
@media screen and (min-width: 768px) {
  .bottom-panel {
    display: none;
  }

  /**
   * The body no longer needs to account for the bottom panel, since it's
   * invisible.
   */
  
  body {
    padding-bottom: 0;
  }
}

/**
 * Button styles for the bottom panel.
 *
 * 2. 0 flex-basis guarantees equal widths for the buttons.
 * 3. Minor text vertical alignment.
 */

.bottom-panel__btn {
  align-items: center;
  color: #000;
  display: flex;
  flex: 1 1 0; /* 2 */
  justify-content: center;
  line-height: 1; /* 3 */
  text-decoration: none;
  text-transform: uppercase;
}

.bottom-panel__btn:first-of-type {
  border-left: 0;
}

/**
 * 1. A bit of space between the icon and label.
 */

.bottom-panel__icon {
  margin-right: 0.5rem; /* 1 */
}