/*
  With Intent — base styles
  Ported from the Xavier WordPress theme (style.css), WordPress removed.
*/

body {
  margin: 0 auto;
  font-family: 'apercuregular', verdana, sans-serif;
  padding-top: 5vw;

  /* Short pages used to leave an unstyled white band under the footer, because
     the coloured section had a fixed height and simply stopped. Most visible on
     /contact/ once the form is replaced by the confirmation message. Making the
     page a column that is at least viewport-tall, with the content section
     taking up the slack, keeps the background running to the bottom. */
  min-height: calc(100vh - 5vw); /* less body's own padding-top */
  display: flex;
  flex-direction: column;
}

/* Take the slack, but never shrink below the content. */
body > section {
  flex: 1 0 auto;
}

body > footer {
  flex-shrink: 0;
}

/*---------------- NAV ----------------*/

a.h2-button,
nav ul li a,
h2.button a {
  text-decoration: none;
}

a:link,
a:visited {
  color: black;
}

nav a:hover {
  color: #474545;
}

nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 5vw;
  position: fixed;
  background-color: white;
  top: 0;
  z-index: 9999;
}

.header__icon {
  display: none;
}

nav ul {
  text-decoration: none;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 1.1vw;
  font-weight: bold;
  margin: 0;
  margin-right: 20px;
  padding: 0;
  text-transform: uppercase;
}

nav li {
  margin: 10px 35px;
}

nav .logo_with_intent {
  position: relative;
  margin: -0.7vw;
  width: 8.4vw;
  height: 8.4vw;
  /* The wordmark is taller than the 5vw nav bar, so its lower half sits on
     whatever is behind the nav. That reads fine over the light heroes but the
     black type vanished against the dark case-study images, so give it a white
     halo -- invisible against the white bar and the pale heroes. */
  filter: drop-shadow(0 0 2px white) drop-shadow(0 0 5px white);
}

nav .logo_top {
  position: relative;
  margin: 0;
  top: 0.8vw;
  height: 5vw;
}

/*---------------- POSTS ----------------*/

.button {
  padding: 0.6vw 1.8vw;
  background-color: white;
  margin: 6vw 0 4vw 0;
  font-size: 1.2vw;
  text-transform: uppercase;
}

section {
  width: 100%;
}

/* The nav is fixed, so anchor targets need to stop below it rather than
   underneath it. The original theme did this with a jQuery -60px fudge on
   load; scroll-margin-top is the same idea without the race. */
section article {
  scroll-margin-top: 5vw;
}

section article {
  height: 37vw;
  display: flex;
  text-align: center;
}

.secondary {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-family: 'apercu', verdana, sans-serif;
}

.intro,
.page,
.post {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 2;
  background-size: cover;
  background-position-y: bottom;
  background-repeat: no-repeat;
}

.post {
  flex-direction: column-reverse;
}

.post p {
  font-size: 1.9vw;
  margin: 40px 20px 20px;
  margin-bottom: 15vw;
  font-weight: bold;
}

.page p {
  font-size: 3vw;
  margin: 0 200px;
  width: 55%;
  font-weight: bold;
}

/*---------------- INTRODUCTION ----------------*/

#intro_id .intro {
  background-position-y: top;
  background-position-x: center;
}

#intro_id .intro p {
  margin: 0 auto;
  font-size: 2.2vw;
  width: 60%;
  font-weight: bold;
}

/*---------------- DISPLAY 1 ----------------*/

.secondary-home {
  margin: 100px 9vw;
  font-size: 2.5vw;
  font-style: oblique;
  width: 60%;
}

/*---------------- DISPLAY 2 ----------------*/

.display2 {
  flex-direction: row-reverse;
}

/*---------------- CONTACT US ----------------*/

.sidebar {
  background-color: #f7e5d1;
  font-family: 'apercuregular', verdana, sans-serif;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.widget_h2 {
  font-size: 1.3vw;
  margin: 5px;
}

.sidebar p {
  font-weight: normal;
  font-size: 1.3vw;
  margin: 5px;
}

.logo {
  top: 7px;
  right: -31%;
  position: relative;
  height: 7vw;
}

.widget {
  margin: 20px;
  display: flex;
  flex-direction: column;
}

/*---------------- FOOTER ----------------*/

footer {
  padding: 20px;
  color: grey;
  opacity: 0.5;
  font-size: 0.8em;
}

article.no-cs-row {
  width: 75%;
  margin: 0 auto;
  text-align: left;
}

/* Address block: the WordPress widget rendered plain text; keep the links
   tappable on mobile without the browser's default underline. */
.sidebar a,
#main-inner h4 a {
  text-decoration: none;
  color: inherit;
}

.sidebar a:hover,
#main-inner h4 a:hover {
  text-decoration: underline;
}