/* apie.org Page Header: contact strip (.topbar) and the white header bar
   (.header) holding the brand on the left and the Navigation on the right.
   Shared by every page.

   Old-browser notes: layout uses floats, not flexbox or grid. Desktop is the
   default; phone styles sit in one @media block, so browsers without media
   queries (IE8 and older) just keep the desktop header.
   Single breakpoint for the whole site: 960px (also used in nav.css and styles.css). */

/* Contact strip */
.topbar {
  background: #002B66;
  color: #FFFFFF;
  font: 13px/1.4 Arial, Helvetica, sans-serif;
}

.topbar-inner {
  display: block;
  box-sizing: border-box;
  max-width: 936px;
  margin: 0 auto;
  padding: 6px 37px;
  font-style: normal; /* <address> is italic by default */
  text-align: right;
}

.topbar-item {
  display: inline-block;
  margin-left: 1.75em;
}

.topbar a,
.topbar a:visited {
  color: #FFFFFF;
}

/* Header bar. Inner side padding (37px) lines the brand and nav up with the
   text inside the .content panel below. */
.header {
  background: #FFFFFF;
  border-bottom: 3px solid #CCD5CC;
}

.header-inner {
  box-sizing: border-box;
  max-width: 936px;
  margin: 0 auto;
  padding: 14px 37px;
  overflow: hidden; /* contains the floated brand and nav */
}

/* Brand: short name with a small globe after it, full name underneath */
.brand,
.brand:visited {
  float: left;
  color: #002B66;
  text-decoration: none;
}

.brand-name {
  display: block;
  font: bold 30px/1.05 Georgia, "Times New Roman", Times, serif;
  letter-spacing: 0.02em;
  color: #002B66;
}

/* Globe icon after "A.P.I.E.", centred on the capital letters */
.brand-logo {
  margin-left: 0.25em;
  vertical-align: -2px;
  border: 0;
}

.brand-full {
  display: block;
  margin-top: 3px;
  white-space: nowrap; /* one line on desktop; wraps on narrow screens */
  font: 12.5px/1.3 Arial, Helvetica, sans-serif;
  color: #555F58;
}

/* Phones and narrow windows */
@media (max-width: 960px) {
  .topbar-inner {
    padding: 6px 18px;
    text-align: center;
  }

  .topbar-item {
    margin: 0 0.75em;
  }

  .header-inner {
    padding: 12px 18px 0;
  }

  .brand {
    float: none;
    display: block;
    overflow: hidden;
    padding-bottom: 12px;
  }

  .brand-logo {
    width: 20px;
    height: 20px;
  }

  .brand-name {
    font-size: 24px;
  }

  /* The full name stays visible on phones, wrapping beside the globe */
  .brand-full {
    font-size: 13px;
    white-space: normal;
  }
}