/* ——————– header ———————– */

/*

*/

.sticky {

position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;

}

/*

*/

.site-header {

position: relative;
background-color: $nav-bg;
min-height: $spacing-unit * 1.865;
box-shadow: $shadow;

}

/*

*/

.site-title {

@include relative-font-size(1.625);
font-weight: 300;
line-height: $base-line-height * $base-font-size * 2.25;
margin-bottom: 0;
float: left;
text-decoration: none;
color: $nav-text;

&,
&:visited {
  color: $nav-text;
}

}

.site-logo {

display: inline-block;
max-height: 50px;
width: auto;
opacity: 1;
box-shadow: none;
margin-top: 5px;
margin-bottom: 0px;

}

/*

*/

.site-nav {

float: right;
line-height: $base-line-height * $base-font-size * 2.25;
.nav-trigger {
    display: none;
}

.menu-icon {
  display: none;
}

/*

*/

.nav-items {
  position: relative;
  display: inline-block;
  line-height: $base-line-height;
  padding-top: 18px;
  padding-bottom: 18px;

  &:hover {
    color: $nav-text;
    background-color: $nav-hl;
    text-decoration: underline;
  }
  a{
  padding: 18px;
    text-decoration: none;
    color: $nav-text;
    &:visited {
      color: $nav-text;
    }
  }

}

/*

*/

.dropdown-content {
  display: none;
  position: absolute;
  right:0;
  top: 100%;  
  line-height: $base-line-height;
  background-color: $nav-hl-dark;
  min-width: 100%;
  box-shadow: $shadow;
  z-index: 1;

  a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: $nav-text;
  text-align: center;
  &:visited {
    color: $nav-text;
  }
  &:hover {
    color: $nav-text;
    background-color: $nav-hl-light;
    text-decoration: underline;
  }
  }
}

.nav-items:hover .dropdown-content {
  display: block;
}

/*

*/

@include media-query($on-palm) {
  position: absolute;
  top: 9px;
  right: $spacing-unit / 2;
  background-color: $nav-bg;
  border: 1px solid $stroke;
  border-radius: 5px;
  text-align: right;

  label[for="nav-trigger"] {
    display: block;
    float: right;
    width: 36px;
    height: 36px;
    z-index: 2;
    cursor: pointer;
  }

  .menu-icon {
    display: block;
    float: right;
    width: 36px;
    height: 26px;
    line-height: 0;
    padding-top: 10px;
    text-align: center;

    > svg {
      fill: $text-light;
    }
  }

  input ~ .trigger {
    clear: both;
    display: none;
  }

  input:checked ~ .trigger {
    display: block;
  }

  .nav-items {
  position: relative;
  display: block;
  padding: 10px;
    &:not(:last-child) {
      margin-right: 0;
    }
}

.dropdown-content {
  display: none;
  position: left;
  background-color: $box-fill;
  min-width: 100%;
  z-index: 1;
  right: 100%;
  top: 0;
}

.nav-items:input .dropdown-content {
  display: block;
}  
}

}

/* ———- generic pages and posts ———– */

/*

*/

.page-content {

padding-top: $spacing-unit;
padding-bottom: $spacing-unit;
flex: 1;

}

.page-heading {

@include relative-font-size(2);

}

.post-list-heading {

@include relative-font-size(1.75);

}

.post-list {

margin-left: 0;
list-style: none;

> li {
  margin-bottom: $spacing-unit;
}

}

.post-meta {

font-size: $small-font-size;
text-align: center;
color: $text-muted;

a {
  color: $text-muted;
  text-decoration: none;

  &:visited {
  color: $text-muted;
  text-decoration: none;

  &:hover {
  color: $link;
  text-decoration: underline;
  }
  }
}

}

.sidebar-meta {

display: block;
text-align: center;
border-radius: 8px;
box-shadow: $shadow-body;
width: 100%;
height: auto;
padding-top: $spacing-unit;
padding-bottom: $spacing-unit;
padding-left: $spacing-unit / 2;
padding-right: $spacing-unit / 2;
font-size: $small-font-size;
background-color: $box-fill;

}

.post-link {

display: block;
@include relative-font-size(1.5);

}

/**

* post
*/

.post-header {

margin-bottom: $spacing-unit * 2;

}

.post-title {

@include relative-font-size(2.625);
text-align: center;

@include media-query($on-tablet) {
  @include relative-font-size(2.25);
}

}

.post-content {

margin-bottom: $spacing-unit;

h2 {
  @include relative-font-size(2);

  @include media-query($on-tablet) {
    @include relative-font-size(1.75);
  }
}

h3 {
  @include relative-font-size(1.625);

  @include media-query($on-tablet) {
    @include relative-font-size(1.375);
  }
}

h4 {
  @include relative-font-size(1.25);

  @include media-query($on-tablet) {
    @include relative-font-size(1.125);
  }
}

}

.video {

display: block;
border-radius: 8px;
box-shadow: $shadow-body;

}

.document {

display: block;
width: 100%;
height: 500px;
border-radius: 8px;
box-shadow: $shadow-body;

}

/* ————— profile page ———————- */

.profile-common{

padding-top: 100px;
padding-bottom: 100px;
min-height: 700px;

} .db-common{

background-color: $dark-bg;
color: $dbg-text;

h1, h2, h3, h4, h5, h6{
  color: $dbg-text-light;
}

} .db-start{

border-radius: 0% 0% 80% 0% / 0% 0% 10% 0% ;

} .db-middle{

border-radius: 80% 0% 80% 0% / 10% 0% 10% 0% ;

} .db-end{

border-radius: 80% 0% 0% 0% / 10% 0% 0% 0% ;

}

.lb-common{

background-color: $light-bg;
color: $lbg-text;
h1, h2, h3, h4, h5, h6{
  color: $lbg-text-light;
}
a {
  color: $lbg-text-light;
  text-decoration: none;
  &:hover {
    color: $lbg-text-light;
    text-decoration: underline;
  }
}

}

.lb-middle{

border-radius: 80% 0% 0% 0% / 0% 0% 10% 0% ;

} .lb-end{

border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;

}

.profile{

img{
/*max-width: 100%;*/
max-width: 70%;
}

}

@include media-query($on-palm){ .profile{

img{
max-width: 100%;
}

} }

/* ————— home page ————— */

.home-page {

padding-top: $spacing-unit ;

}

.center{

float: center;

}

.social-links-home {

margin-top: $spacing-unit;
margin-bottom: $spacing-unit;
display: block;
text-align: center;
background-color: $dbg-shape;
border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ;
box-shadow: $shadow;
a{
text-align: center;
display: inline-block;
padding: 20px;
color: $text;
&:visited {
color: $text;
}
&:hover {
color: $link-hover;
}

} }

.profile-picture {

 text-align: center;
 img{
   opacity: 1;
   border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ;
   //border-radius: 56% 57% 63% 53% / 66% 44% 74% 68% ;
   //border-radius: 8px;
   //border-radius: 57% 43% 68% 32% / 40% 60% 40% 60% ;
// border-radius: 69% 50% 59% 77% / 68% 50% 79% 72% ;
 }

}

/* ————– pagination ——————- */

/*

*/

.tooltip {

position: relative;
display: inline-block;
border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;

}

.tooltip .tooltiptext::after {

content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;

}

.tooltip:hover .tooltiptext {

visibility: visible;

}

/*

*/

.pagination {

padding-top: $spacing-unit;
padding-bottom: $spacing-unit;
  a {
    border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ;
    display: inline-block;
    background-color: $grey85;
    max-width: 300px;
    padding: $spacing-unit / 2;
    text-decoration: none;
    box-shadow: $shadow;
    color: $text-light;
    &:hover {
    background-color: $grey8;
    color: $text-light;
    box-shadow: $shadow-hover;
    }
    &:visited {
    color: $text-light;
    text-decoration: none;
  }
  }
}

/* —————– tags page ——————- */

.tag-btn {

margin-right: $spacing-unit;

}

full-tags-list {

.tag-entry {
  margin-top: $spacing-unit ;
  margin-bottom: $spacing-unit ;
  margin-left: $spacing-unit / 2;
  /*margin: 0 0 0.9375rem 1.5625rem;*/
  .entry-date {
    color: $text;
    font-size: $small-font-size;
  }
}

}

/* —————- Footer —————– */

.site-footer {

/*padding-left: $spacing-unit * 1.5;*/
background-color: $footer-color;
color: $nav-text-muted;
a{
color: $nav-text-muted;
&:visited{
color: $nav-text-muted;
}
&:hover{
color: $nav-text;
}
}

}

.footer-col-wrapper {

margin-left: auto;
margin-right: auto;
@include relative-font-size(0.9375);
@extend %clearfix;

}

.footer-col {

@include relative-font-size(0.8);
float: center;
padding: 10px;

}

.footer-col-1 {

text-align: left;
width: -webkit-calc(33%);
width:         calc(33%);

}

.footer-col-2 {

text-align: center;
width: -webkit-calc(34%);
width:         calc(34%);

}

.footer-col-3 {

text-align: right;
width: -webkit-calc(33%);
width:         calc(33%);

}

@include media-query($on-palm) {

.footer-col {
  float: none;
  text-align: center;
  width: -webkit-calc(100% - (#{$spacing-unit} / 2));
  width:         calc(100% - (#{$spacing-unit} / 2));
}

}