/* Stanley theme is designed to work without CSS, so these rules are simply to enhance readability.
   If you want the simplest base to build from, you may wish to remove the following "fancy" elements: 
   - Media rules to switch the navigation to a horizontal layout on wider screens.
   - Hero-style article image.
*/


/* Basic page layout */

body {
  max-width: 800px;
  padding: 0 1em;
  margin: 0 auto;
  font-family: sans-serif;
}

body > header {
  padding-bottom: 1em;
  margin-bottom: 1em;
}

body > footer {
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-top: 1em;
}

article {
  padding-bottom: 1em;
  margin-bottom: 1em;
}

nav.paginator {
  text-align: center;
  padding-top: 1em;
}

ul.article-details,
ul.article-comment-details {
  list-style-type: none;
  list-style-position: inside;
  padding-left: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figure {
    text-align: center;
}

figcaption {
  margin-top: 0.5em;
  font-style: italic;
}

/* Thin black lines to mark transitions between sections */
body > header, article { border-bottom: 1px black solid; }
article:last-of-type { border-bottom: none; }
body > footer, nav.paginator { border-top: 1px black solid; }

/* Header navigation (horizontal) where space allows */

@media (min-width: 768px) {
  nav.nav-primary > ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    list-style-position: inside;
    padding-left: 0;
  }
  
  nav.nav-primary > ul > li {
    flex-basis: 0;
    flex-grow: 1;
    padding-left: 0;
    padding-right: 1em;
  }
  
  nav.nav-primary > ul > li ul {
    padding-left: 1em;
    list-style-position: outside;
  }
  
  header input#search-input {
    width: 100%;
  }

}

/* Hero-style article images */

div.article-image-container {
  position: relative;
  width: 100%;
  max-height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

img.article-image {
  width: 100%;
  height: auto;
  display: block;
}

div.article-image-container h2,
div.article-image-container h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  padding: 0.5em;
  background-color: #FFFFFFFF;
  outline-color: #FFFFFFCC;
  outline-width: 1em;
  outline-style: solid;
  text-align: center;
  margin: 0;
}