@charset "utf-8";
/* ================================
   Brad Shreve — Main Stylesheet
   ================================ */

/* ================================
   Base Type
   ================================ */

body {
  font-family: 'Work Sans', sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
}

h1.light, h4.light {
  color: #ffffff !important;
}

/* ================================
   Navigation
   ================================ */

ul.menu { margin:10px auto; max-width:1200px; background:#222; }
ul.menu li { list-style:none; display:inline; padding:10px; }
ul.menu li a { color:#3ab29e; text-decoration:none; }
ul.menu li a:hover { color:#fff; text-decoration:underline; }

.top-bar { background:#222; }
#wordmark { height:24px; }

/* Sub-menu arrow color */
.dropdown.menu li.is-dropdown-submenu-parent a::after {
  display:block;
  width:0;
  height:0;
  border: inset 6px;
  content:'';
  border-bottom-width:0;
  border-top-style:solid;
  border-color:#3ab29e transparent transparent;
  right:5px;
  left:auto;
  margin-top:-3px;
}

.dropdown.menu .is-active a {
  color:#ffffff;
  background:transparent;
}

/* ================================
   Homepage Banner (NEW)
   Put this directly under the nav:
   <div class="home-banner"><img ...></div>
   ================================ */

.home-banner{
  background:#111;
  line-height:0;            /* removes tiny whitespace gap under images */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.home-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* Optional: if you want the banner to feel more “cinematic” on wide screens */
@media screen and (min-width: 900px){
  .home-banner img{
    max-height: 260px;      /* adjust if you want taller/shorter */
    object-fit: cover;
    object-position: center;
  }
}

/* ================================
   Utility / Layout
   ================================ */

p.interview { margin-top:30px; }

.darkbg { background:#4c453d; }
.ltgray { background:#eee; }
.turquoise { color:#3ab29e; }

.pad { padding:30px !important; }
.nopad { padding:0 !important; }

.white { color:#fff; }

.anchor {
  padding-top:78px;
  margin-top:-78px;
  display:table-caption;
}

.border-top { border-top:solid thin #ccc; padding-top:18px; }
.copyright, .copyright a { font-size:.8em; color:#ccc; }
.copyright a:hover { text-decoration:underline; color:#666; }

/* ================================
   Hero / Intro Sections
   ================================ */

/* If you still use #intro-row somewhere else */
#intro-row {
  background: url(../images/noir-dark-background.jpg);
  padding:60px 0;
  background-size:cover;
}

/* MAIN HOMEPAGE HERO */
#intro-row-hill {
  background: url(../images/noir-dark-background.jpg) center center / cover no-repeat;
  padding:50px 0 60px; /* slightly reduced top padding since banner is above */
  position:relative;
  overflow:hidden;
}

/* Depth overlay (vignette + gentle top shade) */
#intro-row-hill::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 45%);
}

/* Make sure hero content sits above overlay */
#intro-row-hill > *{
  position:relative;
  z-index:1;
}

/* ================================
   Homepage Statement (NOT a quote)
   ================================ */

#intro-row-hill .home-statement{
  font-family:'Work Sans', sans-serif;
  font-style:normal !important;
  font-weight:300;
  font-size:1.35rem;
  line-height:1.45;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.90);
  text-align:center;

  max-width:720px;
  margin:0 auto 40px;
  padding:14px 22px;
  box-sizing:border-box;

  background:rgba(0,0,0,0.22);
  border-radius:8px;
  text-shadow:0 2px 14px rgba(0,0,0,0.55);
}

/* Optional thin divider line under statement */
#intro-row-hill .home-statement::after{
  content:"";
  display:block;
  width:120px;
  height:1px;
  margin:16px auto 0;
  background:rgba(255,255,255,0.22);
}

#intro-row-hill .home-statement em,
#intro-row-hill .home-statement i{
  font-style:normal !important;
}

/* ================================
   Quote Panel (if used elsewhere)
   ================================ */

#intro-row-hill .quote-panel {
  max-width:600px;
  margin:0 auto;
  padding:0 40px;
  box-sizing:border-box;
}

#intro-row-hill .quote-panel em,
#intro-row-hill .quote-panel i {
  font-style:normal;
}

/* ================================
   Book cover animation on hover
   ================================ */

#cf {
  position:relative;
  height:433px;
  width:600px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  margin-top:60px;
}

#cf img.top:hover { opacity:0; }

/* ================================
   Social Links
   ================================ */

.smlinks { margin:60px 0; }
ul.smlinks li { list-style:none; display:inline; padding:10px; }
.smlinks img {
  display:inline-block;
  vertical-align:middle;
  width:40px;
  height:auto;
}

/* ================================
   Forms
   ================================ */

.jotform-form { margin-top:60px !important; }

/* ================================
   Responsive
   ================================ */

/* Tablet */
@media print, screen and (min-width: 40em) and (max-width: 64em) {
  #cf img { margin-top:20px; }
  #intro-row,
  #intro-row-hill { padding:40px 0; }

  #intro-row-hill .home-statement{
    font-size:1.2rem;
    margin-bottom:30px;
  }
}

/* Tablet landscape */
@media print, screen and (min-width: 40em) and (max-width: 64em) and (orientation: landscape) {
  #cf img {
    margin-top:60px;
    width:380px;
  }
}

/* Phones */
@media screen and (max-width: 640px) {
  #intro-row-hill .home-statement{
    font-size:1.05rem;
    line-height:1.4;
    padding:12px 16px;
    margin-bottom:24px;
  }

  #cf {
    height:200px;
    width:280px;
  }

  #cf img { margin-top:0; }

  .copyright, .copyright .text-right { text-align:center; }
}