/* vim: set tabstop=2 shiftwidth=2 expandtab smarttab: */

.left-column, .middle-column, .right-column {
  /*
   * NOTE: This is sometimes overridden by content with a margin of "-12px -16px" (see tables.css)
   * or "padding: 0" (see overrides below for main-content)
   */
  padding: 12px 16px;
}

.columns-wrap {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
}

body.no-max-width .columns-wrap {
  max-width: none;
}

.middle-column {
  flex: 1;
}

.right-column {
  white-space: nowrap;
}

.header-columns {
  align-items: center;
}

.header-columns .left-column, .header-columns .middle-column, .header-columns .right-column {
  overflow: hidden;
}

.header-columns h1, .header-columns h2, .header-columns h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: "..";
}

.header-columns .left-column {
  box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, .2);
}

.header-columns input[type=search] {
  width: 49px;
  transition: width 0.3s ease-in-out;
}

.header-columns input[type=search]:focus {
  width: 219px;
}

#main-content {
  display: flex;
  flex-direction: column;
  overflow: auto;
  /*
   * override default padding from .middle-column since we want the footer to be flush
   * with the edges of the element (and we can't use negative margins on the footer
   * because it causes weird scrollbars in Safari with flex layouting)
   */
  padding: 0;
}

#main-content section {
  flex: 1;
  padding: 12px 16px;
}

#main-content footer {
  padding: 5px;
}

/* large screens (desktop) */
@media print, screen and (min-width: 700px) {
  .left-column {
    width: 218px;
  }

  .content-columns .left-column, .content-columns .middle-column {
    /* min-height: calc(100vh - 69px); */ /* guesstimate; hopefully accurate enough for most browsers */
    box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  .header-columns input[type=search] {
    width: 20em;
  }

  .header-columns input[type=search]:focus {
    width: 30em;
  }
}

/* really small screens */
@media screen and (max-width: 374px) {
  .header-columns input[type=search]:focus {
    width: 169px;
  }
}