/**

* Site header
*/

.site-header {

height: 100px;
// line-height: 70px;
background-color: var(--header-background-color);

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

// Fancy affect
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);

// Positioning context for the mobile navigation icon
position: relative;

& > .wrapper {
  width: var(--header-content-width);

  @include media-query($on-medium) {
    width: 792px;
  }

  @include media-query($on-small) {
    width: 90%;
  }
}

}

.site-header-container {

margin-bottom: 0;
float: left;
height: 100px;
line-height: 100px;
max-width: 45%;

}

.site-header-text {

display: inline-block;
vertical-align: middle;
line-height: normal;

}

.site-title {

color: $site-header-text-color !important; // !important avoids normal link styling!
font-size: $site-title-font-size;
font-weight: $heavy-font-weight;
letter-spacing: -1px;

:hover {
  opacity: $link-hover-opacity;
  text-decoration: none;
}

@include media-query($on-small) {
  font-size: $site-title-small-font-size;
}

}

.site-description {

color: $site-header-text-color !important; // !important avoids normal link styling!
margin-top: 10px;
margin-bottom: 0;
font-size: $small-font-size;

@include media-query($on-small) {
  display: none;
}

}

.site-nav {

float: right;
line-height: 100px;
font-size: $nav-font-size;

a:hover {
  opacity: $link-hover-opacity;
  text-decoration: none;
}

.page-link {
  color: $site-header-text-color;
  line-height: $base-line-height;

  // Gaps between nav items, but not on the last one
  &:not(:last-child) {
    margin-right: 20px;
  }
}

@include media-query($on-palm) {
  .page-link {
    padding: 20px 0;

    &:not(:last-child) {
      margin-right: 0;
    }
    margin-left: 20px;
  }
}

}

/**

* Site footer
*/

.site-footer {

position: absolute;
bottom: 0;
width: 100%;
// height: 80px;
line-height: 18px;
padding: 10px 0;
font-size: $site-footer-font-size;
color: var(--footer-text-color);
background-color: var(--footer-background-color);
text-align: center;
border-top: 1px solid var(--grey-color-light);

}

.social-icons {

text-align: center;
margin-bottom: 0.65em;

}

.social-icon {

font-size: $title-small-font-size;
display: inline-block;
padding: 0 0.35em;

&,
&:visited {
  color: var(--grey-color-dark);
}

}

/**

* Page content
*/

.page-content {

padding-top: 20px;

@include media-query($on-medium) {
  padding-top: 10px;
}

@include media-query($on-small) {
  padding-top: 10px
}

}

.post-list {

display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;

&:after {
  display: block;
  width: 30%;
  content: "";
}

> article {
  float: left;
  width: 30%;
  margin-bottom: 50px;

  @include media-query($on-small) {
    width: 100%;
  }
}

.post-title {
  font-size: $title-medium-font-size;
  line-height: 1.125;
  letter-spacing: .004em;
}

.post-content > p {
  font-size: $small-font-size;
}

.post-link:hover {
  text-decoration: none;
}

}

.post-lead {

font-size: $lead-font-size;
line-height: 1.5;
letter-spacing: .017em;

@include media-query($on-medium) {
  font-size: $lead-small-font-size;
}

@include media-query($on-small) {
  font-size: $lead-small-font-size;
}

}

.post-meta {

font-size: $meta-font-size;
line-height: 1.19048;
font-weight: 400;
letter-spacing: .011em;
color: $grey-color;

margin-top: .4em;

@include media-query($on-medium) {
  font-size: $meta-small-font-size;
  line-height: 1.21053;
  letter-spacing: .012em;
}

@include media-query($on-small) {
  font-size: $meta-small-font-size;
  line-height: 1.21053;
  letter-spacing: .012em;
}

& + .post-title {
  margin-top: .4em;
}

}

.post-link {

&,
&:visited {
  color: var(--text-color);
}

}

.post-continue {

a {
  text-decoration: none;
  color: var(--link-color);

  &:hover {
    text-decoration: underline;
  }
}

}

// .post-continue { // a { // padding: 8px 15px; // text-decoration: none; // // &, // &:visited { // color: $grey-color; // background-color: var(–grey-color-light); // } // // &:hover { // color: white; // background-color: var(–link-color); // } // } // }

/**

* Posts
*/

.post {

margin-left: auto;
margin-right: auto;

width: 100%;

@include media-query($on-small) {
  width: 95%;
}

}

.post-header {

margin-bottom: $spacing-unit;

}

.post-title {

font-size: $title-font-size;
line-height: 1.1;
font-weight: 900;
letter-spacing: 0em;
margin-bottom: 0px;

@include media-query($on-medium) {
  font-size: $title-medium-font-size;
  line-height: 1.125;
  letter-spacing: .004em;
}

@include media-query($on-small) {
  font-size: $title-small-font-size;
  line-height: 1.14815;
  letter-spacing: .008em;
}

}

.post-content {

margin-bottom: $spacing-unit;

// First paragraph is the lead
// p:first-of-type {
//   font-size: $lead-font-size;
//   line-height: 1.5;
//   font-weight: 500;
//   letter-spacing: .017em;
//
//   @include media-query($on-medium) {
//     font-size: $lead-small-font-size;
//   }
//
//   @include media-query($on-small) {
//     font-size: $lead-small-font-size;
//   }
// }

// Headers

h1 {
  font-size: $title-font-size;
  line-height: 1.09375;
  font-weight: 800;
  letter-spacing: .011em;

  @include media-query($on-medium) {
    font-size: $title-small-font-size;
    line-height: 1.1073;
    letter-spacing: .012em;
  }
}

h2 {
  font-size: $subtitle-font-size;
  line-height: 1.20849;
  font-weight: 700;
  letter-spacing: .015em;

  @include media-query($on-medium) {
    font-size: $subtitle-small-font-size;
    line-height: 1.22739;
    letter-spacing: .016em;
  }
}

// TODO: Revise h3
h3 {
  font-size: $lead-font-size;
  line-height: 1.22739;
  font-weight: 600;
  letter-spacing: .014em;

  @include media-query($on-medium) {
    font-size: $lead-small-font-size;
    line-height: 1.18182;
    letter-spacing: .015em;
  }
}

}

/**

* Pagination
*/

.pagination {

padding: $spacing-unit / 2 0;
border-top: 1px solid var(--grey-color-light);
border-bottom: 1px solid var(--grey-color-light);
text-align: center;
@extend %clearfix;

a {
  &,
  &:visited {
    color: $grey-color;
  }
}

.previous {
  float: left;
}

.next {
  float: right;
}

}

/**

* Codefund Ads
*/

:root {

--ad-background-color: #ededed;
--ad-text-color: #777777;
--ad-strong-text-color: #212121;
--ad-powered-by-color: #909090;

}

@media (prefers-color-scheme: dark) {

:root {
  --ad-background-color: rgba(0, 0, 0, 0.3);
  --ad-text-color: rgba(255, 255, 255, 0.8);
  --ad-strong-text-color: #fafafa;
  --ad-powered-by-color: rgba(255, 255, 255, 0.7);
}

}