/* dg-header.css
   Supplemental styles for the Bootstrap-based header/footers ported from
   index.html into the Confronting Violence digital gallery pages. */

/* ---------- Header ---------- */

.insertheader {
  width: 100%;
  clear: both;
}

.insertheader .bg-primary,
.insertheader .bg-secondary {
  position: relative;
  z-index: 6000;
}

.insertheader .container {
  max-width: 1140px;
  margin: 0 auto;
}

.insertheader .branding img.img-fluid {
  max-width: 100%;
  height: auto;
}

.insertheader .input-group {
  display: flex;
}
.insertheader .form-control {
  flex: 1 1 auto;
}
.insertheader .btn-outline-secondary {
  cursor: pointer;
}

/* Dropdown hover fallback in case Bootstrap JS isn't initialized */
.insertheader .navbar-nav .dropdown-menu {
  display: none;
  position: absolute;
  z-index: 6100;
}
.insertheader .navbar-nav .dropdown:hover > .dropdown-menu,
.insertheader .navbar-nav .dropdown-menu.show {
  display: block;
}

.insertheader .navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* ---------- Browse grid layout ---------- */
/* The Bootstrap CSS pulled in for the new header applies a global
   `*, *::before, *::after { box-sizing: border-box; }`. That silently
   changes two things on this page:
     - .photo becomes 87px tall overall instead of 87px + 1px border = 89px
     - the grid rows no longer add up to 126px
   126px is the height of one band of the repeating bg-dg-grid.png tile
   (117px white/cream band + 9px tan rule; the tile alternates white and
   cream, so it repeats every 252px). Once the rows drift, the tan rule
   slides up through the thumbnails instead of sitting between the rows.

   Restore the original content-box metrics so each row is exactly one
   band tall and the thumbnail sits centered within it. The grid is
   left-aligned at a 24px inset with four 212px columns on a 10px
   gutter (24 + 4 * 222 = 912px), which is what the design calls for --
   don't center it, that pulls the first column off the 24px inset. */

.x_w.dg-browse .c_w .main .content ul.grid {
  box-sizing: content-box;
  max-width: none;
  margin: 0;
  padding: 0 0 0 24px;
  background: url(img/bg-dg-grid.png) 0 0;
  overflow: hidden;
  clear: both;
  text-align: left;
  font-size: 12px;
}

/* 14px + 89px + 14px + 9px margin = 126px = one background band.
   The 14px top/bottom padding is what centers the thumbnail in the
   band, so it has to survive the border-box reset. */
.x_w.dg-browse .c_w .main .content ul.grid li {
  box-sizing: content-box;
  float: left;
  display: block;
  vertical-align: baseline;
  text-align: left;
  width: 212px;
  height: 89px;
  max-height: 89px;
  padding: 14px 0;
  margin: 0 10px 9px 0;
}

/* 87px + 1px border = 89px */
.x_w.dg-browse .c_w .main .content ul.grid li .photo {
  box-sizing: content-box;
  width: 87px;
  height: 87px;
}

/* 83px + 3px border = 89px, so hovering doesn't nudge the row */
.x_w.dg-browse .c_w .main .content ul.grid li a:hover .photo,
.x_w.dg-browse .c_w .main .content ul.grid li a:focus .photo {
  box-sizing: content-box;
  width: 83px;
  height: 83px;
}

/* keep item text at its normal size (the old rule zeroed the <ul> font
   size to kill inline-block gaps; the float layout doesn't need that) */
.x_w.dg-browse .c_w .main .content ul.grid li h4,
.x_w.dg-browse .c_w .main .content ul.grid li h4 *,
.x_w.dg-browse .c_w .main .content ul.grid li span,
.x_w.dg-browse .c_w .main .content ul.grid li p {
  font-size: 12px;
}

/* ---------- Print ---------- */
@media print {
  .insertheader,
  .hmd-footer-black,
  .insertfooter {
    display: none !important;
  }
}