/*
Theme Name: Fy!
Theme URI: https://superpfui.de
Description: The leckerste Theme for SUPERPFUI
Author: Maximilian Schalch
Author URI: https://designerDeveloper.de/
Version: 1.1
Tags: Responsive, Accessible
*/

:root {
  --black-color: #10100e;
  --grey-1: #2b2b25;
  --grey-2: #454545;
  --grey-3: #606060;
  --grey-4: #7a7a7a;
  --grey-5: #959595;
  --grey-6: #afafaf;
  --grey-7: #cacaca;
  --grey-8: #e4e4e4;
  --white-color: #ffffff;

  --accent-color: #e60026;

  --accent-l1: #e91a3c;
  --accent-l2: #eb3351;
  --accent-l3: #ee4d67;
  --accent-l4: #f0667d;
  --accent-l5: #f38093;
  --accent-l6: #f599a8;
  --accent-l7: #f8b3be;
  --accent-l8: #faccd4;
  --accent-l9: #fde6e9;

  --accent-d1: #cf0022;
  --accent-d2: #b8001e;
  --accent-d3: #a1001b;
  --accent-d4: #8a0017;
  --accent-d5: #730013;
  --accent-d6: #5c000f;
  --accent-d7: #45000b;
  --accent-d8: #2e0008;
  --accent-d9: #170004;

  --font-serif:'IBM Plex Serif',serif;
  --font-sans:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* light mode */

  --text-color: var(--black-color);
  --bg-color: var(--white-color);
  --logo-color: var(--black-color);

  --separator-color: var(--grey-5);
  --border-color: var(--grey-8);
  
  --link-underline: var(--accent-l4);
  --link-hover: var(--accent-color);
  
  --tag-border: var(--accent-l6);
  --tag-border-style: dashed;
  --tag-bg: var(--white-color);
  --tag-text: var(--accent-l4);
  --tag-bg-hover: var(--accent-color);
  --tag-text-hover: var(--white-color);
  
  --footer-bg: var(--accent-d5);
  --footer-color: var(--white-color);
  
  --zuckerl-img: url('zuckerl.svg');
  --zuckerl-color: #5f9ea0;

  --logo-height: 120px;
  --logo-size: 0.5;

  --bold-weight: 500;
  --bold-spacing: 0.01rem;

}

@media (prefers-color-scheme: dark) {
:root {
  
  --white-color: #ffffe0;

    --text-color: var(--white-color);
    --bg-color: var(--black-color);
    --logo-color: var(--white-color);
    
    --border-color: var(--grey-2);
    
    --tag-border: var(--accent-d2);
    --tag-text: var(--accent-d2);
    --tag-bg: var(--black-color);
  /*--tag-border-style: dashed;*/

    --footer-bg: var(--accent-l2);
    --footer-color: var(--black-color);

    --zuckerl-img: url('zuckerl-d.svg');
    --zuckerl-color: #00eab6;

    --bold-weight: 700;
    --bold-spacing: 0.05rem
  }

}

* {
  margin:0;
  padding:0;
}

body {
  font-family: var(--font-mono);
  font-weight:300;
  font-size: 0.9rem;
  line-height: 1.4rem;
  color: var(--text-color);
  background: var(--bg-color);
}

h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 100;
  font-size: 2rem;
  margin: .6rem 0 1.4rem -1px;
  line-height: 2rem;
  height:calc( var(--logo-height) * var(--logo-size) );
}

h1 a {
  text-decoration:none;
  color:inherit;
  position:relative;
}

.logo-svg .st0 {
  fill: var(--logo-color);
}

.word-holder {
  position:absolute;
  width:calc( 3 * var(--logo-height) * var(--logo-size) );
}

header {
  background: var(--bg-color);
  overflow:auto;
}

main {
  font-style:italic;
  background: var(--bg-color);
  overflow: auto;
}

.w {
  width: 94%;
  margin: 3rem auto 2rem;
  max-width: 808px;
  max-width: 70ch;
}

h2 {
  margin-bottom: 1rem;
  font-family:var(--font-serif);
  font-size:1.1rem;
  line-height: 1.1rem;
  font-weight:600;
}

.single-post h2 {
  font-size: 3rem;
  line-height: 3rem;
  margin-bottom: 1.8rem;
  /*hyphens:auto;*/
}

.archive h2 {
  font-weight:200;
}

.archive h2 b {
  font-weight: 600;
}

h3,h4 {
  font-size: 0.9rem;
  line-height: 1.4rem;
  font-weight: var(--bold-weight);
  letter-spacing: var(--bold-spacing);
}

.single h3,
.single h4 {
  margin-top: 2.8rem;
}

.home article h3,
.home article p,
.archive article h3,
.archive article p {
  display: inline;
}

main article h3::after {
  content: "―";
  font-weight: 300;
  color: var(--separator-color);
  margin:0 0.2rem;
}

main h3 a {
  text-decoration: none;
}

main p {
  hyphens: auto;
  margin-bottom: 0.9rem;
}

main p strong,
main p b {
  font-weight: var(--bold-weight);
  letter-spacing: var(--bold-spacing);
}

main article p {
  hyphens: none;
}

main a:link,
main a:visited {
  color: var(--text-color);
  transition:color .3s ease-out;
}

main a:hover,
main a:active,
main article:hover a:link,
main article:hover a:visited {
  color: var(--link-hover);
  transition:color .3s .1s ease-out;
}

.single-post main a:link,
.single-post main a:visited,
.archive main a:link,
.archive main a:visited {
  text-decoration-style: dashed;
  text-decoration-color: var(--link-underline);
  text-underline-offset: .2rem;
}

.single-post main a:active,
.archive main a:active {
  text-decoration-style: solid;
}

.home article,
.archive article {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
}

main ul,
main ol {
  padding-left: 2rem;
  margin-bottom: 0.9rem;
  list-style-type: none;
}

main ul {
  list-style-type: '→ ';
}

main ol {
  list-style-type: decimal-leading-zero;
  padding-left: 2.8rem;
}

.tags ul {
  list-style-type: none;
  padding:0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.tags li {
  display: inline;
  margin: 0 .5rem .2rem 0;
  font-size: .75rem;
  line-height: .75rem;
  font-style:normal;
  font-family:var(--font-sans);
}

main .tags a:link,
main .tags a:visited {
  display:block;
  padding: .2rem .2rem .2rem;
  border: 1px var(--tag-border-style) var(--tag-border);
  background: var(--tag-bg);
  color: var(--tag-text);
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s ease-out;
}

main .tags a:hover,
main .tags a:active {
  background: var(--tag-bg-hover);
  color: var(--tag-text-hover);
  transition: all .3s .1s ease-out;
}

.ingredients {
  border-top: 3px solid var(--grey-2);
  border-bottom: 2px solid var(--grey-2);
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  margin-top: 58px;
}

.ingredients h3 {
  margin: .6rem 0;
}

.ingredients ul {
  border-top: 1px solid var(--grey-2);
  border-bottom: 1px solid var(--grey-2);
  list-style-type: none;
  padding: 1rem;
  margin-left: 0;
  margin-bottom: 0;
  font-style: italic;
  font-family:var(--font-mono);
}

.ingredients .entry-content ul {
  margin-left: 0;
}

.ingredients ul li:last-child {
  margin-bottom: 0;
}

.ingredients li span:nth-child(2) {
  font-weight: var(--bold-weight);
  letter-spacing: var(--bold-spacing);
  margin-left: -0.3rem;
}

.ingredients .li-divider {
  margin: 1.2rem 0 .5rem 2.9rem;
  font-weight: 300;
}

.ingredients .small {
  text-align: right;
  font-size: .8em;
  font-style: italic;
  line-height: 2rem;
}

.ingredients .small a:link,
.ingredients .small a:visited {
  color: var(--grey-3);
  text-decoration: none;
}

.ingredients .small a:hover,
.ingredients .small a:active {
  color: var(--text-color);
}

.zuckerl {
  margin-top: 3rem;
  background-image: var(--zuckerl-img);
  background-position: top center;
  background-size: 120px;
  background-repeat: no-repeat;
  padding-top: 130px;
  padding-bottom: 16px;
  text-align: center;
  border-bottom: 4px double var(--zuckerl-color);
  max-width: 400px;
  margin: 3rem auto 0;
}

.footer {
  font-family: var(--font-sans);
  background: var(--footer-bg);
  color: var(--footer-color);
  overflow:auto;
  /*position: sticky;
  bottom: 0;
  z-index: -1;*/
}

.footer.footer-fixed {
  position:absolute;
  bottom: 0;
  width: 100%;
}

.footer .inner {
  margin: 2rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

.archive .footer h2,
.footer h2 {
  font-weight:600;
}

.footer h2,
.footer li,
.footer p {
  font-size: 1rem;
  font-family: var(--font-sans);
}

.footer p {
  margin-bottom: 0.9rem;
}

.footer a:link,
.footer a:visited {
  color: var(--footer-color);
  text-decoration:underline;
  text-decoration-style: dashed;
  text-underline-offset: .2rem;
}

.footer ul {
  list-style-type: none;
}

.footer ul ul {
  margin-left: 1rem;
}

.footer .ul-tags li {
  display: inline;
  margin-right: .5rem; 
}

.footer li a:link,
.footer li a:visited {
  text-decoration: none;
}

@media (min-width: 768px) {

  body,
  h2,h3 {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  h2 {
    margin-top: 7rem;
    margin-bottom: 2.7rem;
  }

  .footer h2 {
    margin-top: 0;
  }

  h4 {
    font-size: 1rem;
    letter-spacing: 0.1rem;
  }

  /*.single-post h2 {
    hyphens: manual;
  }*/

  .tags li {
    font-size: 1rem;
    line-height: 1rem;
  }

  .zuckerl {
    background-position: left top;
    padding-top: 0;
    padding-left: 190px;
    text-align: left;
    max-width: unset;
  }

  .footer .inner {
    flex-direction: row;
    margin:2rem auto;
    max-width:808px;
    max-width:70ch;
  }

  .footer .inner div {
    flex:1 1 0;
  }
}

@media (min-width: 1000px) {

  .zuckerl {
    background:none;
    position:relative;
    padding-left:100px;
    padding-right:50px;
    padding-bottom: 3rem;
    margin-top: 7rem;
    margin-bottom: 6rem;
  }
  .zuckerl::before {
    content: "";
    width: 150px;
    height: 150px;
    position:absolute;
    background: var(--zuckerl-img) no-repeat center;
    background-size:150px;
    left: -5rem;
    top: -2rem;
  }

}

#word1-v1,
#word1-v2,
#word1-v3,
#word1-v4,
#word1-v5,
#word1-v6,
#word1-v7,
#word1-v8,
#word1-v9,
#word1-v10,
#word1-v11,
#word2-v1,
#word2-v2,
#word2-v3,
#word2-v4,
#word2-v5,
#word2-v6,
#word2-v7,
#word2-v8,
#word2-v9,
#word2-v10,
#word2-v11 {
  opacity: 0;
  transition: opacity .1s ease-in-out, margin-left .3s ease-in-out;
}

.word1-v1 #word1-v1,
.word1-v2 #word1-v2, 
.word1-v3 #word1-v3, 
.word1-v4 #word1-v4, 
.word1-v5 #word1-v5, 
.word1-v6 #word1-v6, 
.word1-v7 #word1-v7, 
.word1-v8 #word1-v8, 
.word1-v9 #word1-v9, 
.word1-v10 #word1-v10, 
.word1-v11 #word1-v11,
.word2-v1 #word2-v1,
.word2-v2 #word2-v2,
.word2-v3 #word2-v3,
.word2-v4 #word2-v4,
.word2-v5 #word2-v5,
.word2-v6 #word2-v6,
.word2-v7 #word2-v7,
.word2-v8 #word2-v8,
.word2-v9 #word2-v9,
.word2-v10 #word2-v10,
.word2-v11 #word2-v11 {
  opacity: 1;
  transition: opacity .1s ease-in-out, margin-left .3s ease-in-out;
}

.logo-h1 .word1.word1-v1 ~ .word2 {
  margin-left: calc( -1.5rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v2 ~ .word2 {
  margin-left: calc( -1.9rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v3 ~ .word2 {
  margin-left: calc( -1.1rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v4 ~ .word2 {
  margin-left: calc( -0.8rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v5 ~ .word2 {
  margin-left: calc( -0.65rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v6 ~ .word2 {
  margin-left: calc( .1rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v7 ~ .word2 {
  margin-left: calc( -1.4rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v8 ~ .word2 {
  margin-left: calc( -0.5rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v9 ~ .word2 {
  margin-left: calc( -1.5rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v10 ~ .word2 {
  margin-left: calc( -2rem * var(--logo-size) );
}
.logo-h1 .word1.word1-v11 ~ .word2 {
  margin-left: calc( -3rem * var(--logo-size) );
}