/*
Theme Name: Piechnat Theme
Version: 1.0
Author: Mateusz Piechnat
Author URI: https://piechnat.pl/
Text Domain: piechnat-theme
Domain Path: /languages
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
:root {
  --outer-height: 100vh;
  --inner-height: 100%;  
}
html { font-size: 16px; }
@media (orientation: portrait) {
  html { font-size: calc(12px +  0.97043vw); }
}
html, body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
  margin: 0; border: 0; padding: 0; 
  height: var(--inner-height);
}
body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 1.1em;
  line-height: 1.5;
  --admin-bar-height: 0px;
}
body.admin-bar { --admin-bar-height: 32px; }
@media screen and (max-width: 782px) { 
  body.admin-bar { --admin-bar-height: 46px; } 
}
a {
  color: #c2c2ff;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  text-decoration: underline;
}
article {
  overflow: auto;
}
/**************************************************************************************************/
.bg-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--outer-height);
}
.bg-fixed > div {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-size: cover;
  transition: all 0.3s;
}
/**************************************************************************************************/
.page-header {
  position: relative;
  max-width: 1024px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 calc(3vw + 0.5em);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; 
  align-items: center; 
  flex-wrap: wrap;
  text-shadow: 2px 2px 2px #222;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  text-align: center;
}
.custom-title .page-header {
  height: calc(var(--inner-height) - var(--admin-bar-height));
  cursor: pointer;
}
.page-header .small-title {
  padding: 2em 0;
}
.page-header .big-title {
  font-size: min(min(2.5em, calc(var(--inner-height) * 0.07)), 5vw);
}
.page-header > * {
  flex-grow: 1;
  flex-basis: min-content;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(90deg); }
  40% { transform: translateY(-4vh) rotate(90deg); }
  60% { transform: translateY(-2vh) rotate(90deg); }
}
.custom-title .page-header::after {
  content: "⟫";
  display: block;
  position: absolute;
  bottom: 0;
  font-size: 3rem;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  text-shadow: none;
  font-weight: 100;
  animation: bounce 2s infinite;
}
/**************************************************************************************************/
.page-content {
  max-height: 999999px;
  position: relative;
  padding: 0 0.5em;
  margin: 0 auto;
}
.content-panel {
  max-width: 1024px;
  margin: 0 auto;
  padding: 1vw 3vw;
  color: #000;
  background-color: #fff;
  box-shadow: 0 0 1em 0.3em rgba(49, 52, 57, 0.6);
  border-radius: 0.7em;
  scroll-margin-top: calc(var(--navigation-bar-height) + var(--admin-bar-height) + 0.5em);
}
.wide-layout .page-content {
  background-color: #eee;
  box-shadow: 0 0 1em 0.3em rgba(49, 52, 57, 0.6);
  padding: 0;
}
.wide-layout .content-panel {
  padding: 1vw calc(3vw + 0.5em);
  box-shadow: none;
  border-radius: 0;
}
@media screen and (max-width: 639px) { /* wide-layout on small screens */
  .page-content {
    background-color: #eee;
    box-shadow: 0 0 1em 0.3em rgba(49, 52, 57, 0.6);
    padding: 0;
  }
  .content-panel {
    padding: 1vw calc(3vw + 0.5em);
    box-shadow: none;
    border-radius: 0;
  }
}
.content-panel a {
  color: #5a5aa5;
}
/**************************************************************************************************/
.page-footer {
  position: relative;
  max-width: 1024px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 calc(3vw + 0.5em);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; 
  align-items: center; 
  flex-wrap: wrap;
  text-shadow: 2px 2px 2px #222;
  text-align: center;
}
.page-footer > * {
  flex-grow: 1;
  flex-basis: min-content;
}
.page-footer::after {
  content: "";
  display: block;
  height: 1px;
}

/* MENU RECONFIGURATION - BEGIN */

#navigation-bar .container {
  position: fixed;
  background-color: #30091d;
}
#navigation-bar .placeholder {
  display: block;
}
.custom-title #navigation-bar .placeholder {
  display: none;
}
#navigation-bar .container, #navigation-bar .logo-wrapper {
  transition: all 0.3s;
}
.custom-title #navigation-bar:not(.sticky) .container {
  background-color: transparent;
  box-shadow: none;
}
.custom-title #navigation-bar .logo-wrapper {
  opacity: 1;
}
.custom-title #navigation-bar:not(.sticky) .logo-wrapper {
  opacity: 0;
}
@media (min-width: 1025px) { 
  #navigation-bar .menu-panel ul {
    background-color:#30091d;
  }
  .custom-title #navigation-bar:not(.sticky) .menu-panel > ul > li > a:hover {
    background-color: transparent;
    text-decoration: underline;
  }
  #navigation-bar .menu-panel > ul > li > a::after {
    content: '▼';
    display: inline-block;
    margin-left: 0.6em;
    opacity: 0.6;
    font-size: 0.8em;
    vertical-align: top;
  }
}
@media (max-width: 1024px) {
  #navigation-bar .menu-panel {
    background-color: #30091d;
  }
}

/* MENU RECONFIGURATION - END */

.post-title {
  margin-bottom: 0.2em;
}
.post-date {
  font-size: smaller;
  font-style: italic;
}
.post-comments {
  font-weight: 700;
  text-align: right;
  font-size: small;
}
.post-comments:empty {
  display: none;
}

.comment-reply-title small { display: block; }
.comment-reply-title small a { line-height: 3em; }

.posts-pagination > .page-numbers, .comments-pagination > .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  margin: 0; border: 0; padding: 0;
  text-align: center;
  max-width: 700px;
}
.posts-pagination > .page-numbers > li > *, .comments-pagination > .nav-links > * {
  display: block;
  padding: 1em 0.1em;
  box-sizing: border-box;
  text-decoration: none;
}

.posts-section, .comments-section, .comment {
  scroll-margin-top: var(--navigation-bar-height);
}

.navigation {
  border: dotted #ddd;
  border-width: 1px 0;
  margin: 2em 0;
}

/**************************************************************************************************/

.test {
  display: block;
  width: 1500px;
  height: 100px;
  background: black;
}