/* Fonts and Typography */

@font-face {
  font-family: 'Judson';
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Judson-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Montserrat-Italic-Variable.ttf') format('truetype');
  font-weight: 100 900;
}



/*---------------------------------------------------------*/

body {
    color:#000;
}

body, input, select, textarea, button {
  font-family: var(--sans);
  font-size: var(--txt-base);
  line-height: 1.5;
  font-weight: 350;
}

b,strong {
  font-weight: 500;
}

h1,h2,h3,h4,h5,h6 { 
  font-weight: bold; 
}

h1,h2,h3 {
  font-family: var(--serif);
}

/* Buttons */

  .btn,
  .wp-block-button__link {
    background-color: var(--gold);
    cursor:pointer;
    color:#fff;
    padding:0 2em;
    border:none;
    border-radius:var(--radius); 
    min-width:150px;
    transition: 0.5s;
    min-height:var(--input-height);
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    text-decoration:none;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }
  
  .btn:hover,
  .btn:focus,
  .wp-block-button__link:hover,
  .wp-block-button__link:focus {
    background: var(--link-color);
    color:#fff;
  }
  
  .btn-outline {
    background:none;
    border:solid 0.08em var(--purple);
    color:#000;
  }

  .btn-outline:hover,
  .btn-outline:focus {
    background:none !important;
    color:#000;
  }
  
  .btn:active,
  .wp-block-button__link:active {
    position:relative;
    top:2px;
  }

  .btn-disabled {
    opacity:0.5;
    pointer-events:none;
  }
  
  .btn + .btn { margin-left:0.75em; }

  @media(max-width:640px){
    .btn + .btn { margin-left:0; margin-top:0.75em; }
  }


  /* NC Card 

<div class="ncard">
<a class="ncard_link" href="#">
  <div class="ncard_container">
    <div class="ncard_image">
      <div class="ncard_imgcon">
        <img class="ncard_img" src="" alt="" />
      </div>
    </div>
    <div class="ncard_text">
      <!-- Everything in here is up to the creator -->
      <b class="ncard_pretext">Read Next &rarr;</b>
      <div class="ncard_title">Is God mad at you for not going to church?</div>
      <!-- end creative HTML -->
    </div>
  </div>
</a>
</div>


*/

.ncard {
  --card-padding: 0;
  --card-margin-bottom: 0;
  --card-bg-color: none;
  --card-bg-color-hover: none;
  --card-flex-direction: row;
  --card-border: none;
  --card-border-hover: none;
  --card-bshadow: none;
  --image-width: 40%;
  --image-height: 70%;
  --text-padding: 0.75em 0.5em;
  --border-radius: 0;
  --pretext-color: currentColor;
  --text-size: var(--txt-base);
  --text-color: var(--purple);
  --text-color-hover: var(--purple);
  --trans-speed: 0.6s ease-in-out;
  }
  
  .ncard { 
    width:100%; 
    max-width:100%; 
    position:relative; 
    margin-bottom:var(--card-margin-bottom);
   }
  
  .ncard_link {
  text-decoration:none;
  color:inherit;
  display:block;
  }
  
  .ncard_container {
  display:flex;
  position:relative;
  background:var(--card-bg-color);
  padding:var(--card-padding);
  flex-direction:var(--card-flex-direction);
  border:var(--card-border);
  box-shadow:var(--card-bshadow);
  transition:var(--trans-speed);
  border-radius: var(--border-radius);
  overflow: hidden;
  }
  
  .ncard:hover .ncard_container {
  background:var(--card-bg-color-hover);
  border:var(--card-border-hover);
  }
  
  .ncard_image {
  flex-basis:var(--image-width);
  min-width:var(--image-width);
  overflow:hidden;
  background-color: #eee;
  border-radius:10px;
  }
  
  .ncard_imgcon {
    padding-top:var(--image-height);
    width:100%;
    height:var(--image-height);
    min-height:100%;
    display:block;
    position:relative;
  }
  
  .ncard_img {
    position:absolute;
    object-fit:cover;
    top:0; left:0;
    display:block;
    width:100%;
    height:100%;
    transform:rotate(0deg) scale(1) translateZ(0);
    transition:var(--trans-speed);
  }
  
  .ncard:hover .ncard_img {
    transform:rotate(-2.5deg) scale(1.25) translateZ(0);
  }
  
  .ncard_text {
  display:block;
  /*
  flex-grow:1;
  flex-direction:column;
  justify-content:start;
  */
  font-size:var(--text-size);
  color:var(--text-color);
  padding:var(--text-padding);
  transition:0.3s;
  min-width: 0; /* This is needed if you use truncated content within a flexbox */
  position: relative;
  }

  .ncard_category {
    display: block;
    position: absolute;
    bottom: 100%;
    left: 0;
    padding: 0.5em 1.5em;
    background: var(--purple);
    color: #fff;
    border-radius: 0 10px 0 0;
    z-index: 10;
    font-size: var(--txt-xsmall);
    font-weight: 500;
    letter-spacing: 1px;
  }

  .ncard_title {
    font-weight: 500;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    flex-grow:1;
    width: 100%;
    hyphens: auto;
  }

  .ncard_date,
  .ncard_author,
  .ncard_readtime {
    display: inline-block;
    font-weight: bold;
    font-size: var(--txt-small);
    color: var(--gold);
  }
  
  .ncard:hover .ncard_text {
  color:var(--text-color-hover);
  }

  .ncard:hover .ncard_title {
    text-decoration: underline;
    text-decoration-color: var(--green);
  }
  
  /* NC Card box */
  
  .ncard_box {
  --box-padding: 3em 0;
  --box-text-color: #000;
  --bg-color: transparent;
  --contain-max-width: 1400px;
  }
  
  .ncard_box {
  padding: var(--box-padding);
  color: var(--box-text-color);
  background: var(--bg-color);
  }
  
  .ncard_box .ncontain {
  max-width: var(--contain-max-width);
  }
  
  .ncard_after {
  margin-top:var(--gap);
  }


  /* Home */

    

  .postborder {
    border-top:solid 1px var(--gray-line);
  }

  .postborder h2 {
    font-size: var(--txt-xxlarge); 
    text-transform: uppercase; 
    color: var(--purple);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  @media(max-width:1200px){
    .postborder h2 {
      font-size: var(--txt-xlarge);
    }
  }

  .postborder h2 a {
    color: var(--green);
    font-size: var(--txt-base);
    font-weight: 500;
    font-family: var(--sans);
    display:flex;
    align-items: center;
    border-bottom:solid 1px;
    text-transform: none;
    white-space: nowrap;
    line-height: 1.1;
    transition:0.3s
  }

  .postborder h2 a:hover {
    color: var(--purple);
  }

  .postborder h2 a:after {
    content:'\e902';
    font-family: 'ncicons';
    margin-left: 0.5em;
    transition: 0.3s;
  }

  .postborder h2 a:hover:after {
    margin-left: 1em;
  }

  /* Trending Icon */

  .postborder h2 b {
    display: inline-flex;
    align-items: center;
  }

  .postborder h2 b:after {
    content:'';
    display: inline-block;
    height: 1em;
    width: 1em;
    background: no-repeat center;
    background-image: url(../img/icon-stats.svg);
    background-size: 70% auto;
  }

  #featured .ncard_title {
    font-size: var(--txt-xxlarge);
    line-height:1.1;
    font-family: var(--serif);
  }

  #featured .ncard_readtime {
    display:none;
    }

  #featured .ncard_text {
    padding-left:0;
    padding-bottom:0;
  }

  
  #featured,
  #latest {
    height: calc(100% - var(--gap) );
  }

  #latest .ncontain,
  #latest .ncolumns,
  #featured .ncontain,
  #featured .ncolumns,
  #featured .ncard,
  #featured .ncard_link,
  #featured .ncard_container {
    height: 100%;
  }

  #featured .ncard_container {
    flex-direction: column;
  }

  #featured .ncard_image {
    flex-grow: 1;
  }

  #featured .ncard_title {
    -webkit-line-clamp: inherit;
  }


/* Highlighted grid blocks */


@media(min-width:1200px){

  .ncolumns-bright > .ncard-3,
  .ncolumns-bcenter > .ncard-2,
  .ncolumns-bleft > .ncard-1 {
    grid-column: span 2;
    grid-row: span 2;
  }

  .ncolumns-bright > .ncard-3 .ncard_link,
  .ncolumns-bright > .ncard-3 .ncard_container,
  .ncolumns-bcenter > .ncard-2 .ncard_link,
  .ncolumns-bcenter > .ncard-2 .ncard_container,
  .ncolumns-bleft > .ncard-1 .ncard_link,
  .ncolumns-bleft > .ncard-1 .ncard_container {
    height: 100%;
  }

  .ncolumns-bright > .ncard-3 .ncard_container,
  .ncolumns-bcenter > .ncard-2 .ncard_container,
  .ncolumns-bleft > .ncard-1 .ncard_container {
    flex-direction: column;
  }

  .ncolumns-bright > .ncard-3 .ncard_image,
  .ncolumns-bcenter > .ncard-2 .ncard_image,
  .ncolumns-bleft > .ncard-1 .ncard_image {
    flex-grow: 1;
  }

  .ncolumns-bright > .ncard-3 .ncard_title,
  .ncolumns-bcenter > .ncard-2 .ncard_title,
  .ncolumns-bleft > .ncard-1 .ncard_title {
    font-size: var(--txt-xxlarge);
    font-family: var(--serif);
    line-height: 1.1;
  }

}


/* Modifier: Adds a dropcap to the first paragraph */

.nctext-dropcap .nctext_paragraphs > p:first-of-type:not(:focus)::first-letter {
    float: left;
    position: relative;
    top: 0;
    margin: 0 !important;
    font-size: var(--capsize, 5em);
    line-height: var(--cap-l-height, 0.75);
    padding-right: var(--cap-padding, 1.5rem);
    font-family: var(--cap-font, var(--serif));
    font-weight: var(--cap-weight, normal);
    height: var(--cap-height, 1em);
    font-family: var(--cap-font);
    color: var(--cap-color);
}

.dropcap,
p.has-drop-cap:not(:focus)::first-letter{
  float: left;
  position: relative;
  margin-right: 0.1rem;
  font-size: 5em;
  padding-right: 1.5rem;
  font-family: var(--serif);
  font-weight: bold;
  height: 1em;
  color: var(--purple);
}