/*!
Theme Name: tobias.is.v2
Theme URI: https://tobias.is
Author: Tobias Baldauf
Author URI: https://who.tobias.is
Description: A minimal WordPress theme focused on webperf.
Version: 0.2
License: GNU General Public License v2 or later
*/

/* Modern CSS Reset - November 6th, 2020 - https://piccalil.li/blog/a-modern-css-reset/ - modified to fit my CSS */

*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
a {
  text-decoration-skip-ink: auto;
}
img,
picture {
  max-width: 100%;
  display: block;
}
input,
button,
textarea,
select {
  font: inherit;
}

/* Basics */

:root {
  --color-dark: #252525;
  --color-light: #efefef;
  --color-primary: #3b55ce;
  --color-highlight: #ccff00;
  --color-neonpink: #ff1493;
  --size-step--2: clamp(0.63rem, calc(0.64rem + -0.01vw), 0.64rem);
  --size-step--1: clamp(0.8rem, calc(0.78rem + 0.08vw), 0.84rem);
  --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
  --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
  --size-step-5: clamp(3.05rem, calc(2.47rem + 2.93vw), 4.74rem);
}

body {
  background: var(--color-light);
  color: var(--color-dark);
  font-size: var(--size-step-0);
}

/* Fonts */

.system__sansserif {
  font-family: -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
    "San Francisco", /* MacOS and iOS */ "Avenir Next", Avenir,
    /* MacOS and iOS */ "Segoe UI", /* Windows */ "Lucida Grande",
    /* Older MacOS */ "Helvetica Neue", Helvetica, /* Older MacOS */ "Fira Sans",
    /* Firefox OS */ Roboto, Noto, /* Google stuff */ "Droid Sans",
    /* Old Google stuff */ Cantarell, Oxygen, Ubuntu,
    /* Linux stuff */ "Franklin Gothic Medium", "Century Gothic",
    /* Windows stuff */ "Liberation Sans", /* Linux */ sans-serif; /* Everything else */
}

.system__mono {
  font-family: Menlo, Monaco, /* MacOS */ "Segoe UI Mono, Lucida Console",
    /* Windows */ "Fira Mono", /* Firefox OS */ "Roboto Mono", "Noto Mono",
    /* Google stuff */ "Droid Sans Mono", /* Old Google stuff */ "Ubuntu Mono",
    "DejaVu Sans Mono", "Liberation Mono", /* Linux */ "Courier New",
    /* MacOS and Windows */ monospace; /* Everything else */
}

/* Full Bleed CSS Grid Layout */

header,
article,
nav.pagination,
footer {
  display: grid;
  grid-template-columns: 1fr min(45ch, calc(100% - 64px)) 1fr;
  column-gap: 32px;
}

header > *,
article > *,
nav.pagination > *,
footer > * {
  grid-column: 2;
}

#site-navigation,
article figure,
article figure img,
article div.post-thumbnail,
article img.wp-post-image,
article figure iframe,
article figure video,
article .embed-privacy-container {
  width: 100%;
  grid-column: 1 / 4;
  object-fit: cover; /* enough image w/out taking all too much vertical space */
  object-position: center;
}

article img {
  height: auto;
}

article figure img,
article img.wp-post-image,
article figure.wp-block-embed,
article .embed-privacy-container,
article figure video {
  max-height: 384px;
}

img[data-dominant-color]:not(.has-transparency) {
  /* WP Plugin CSS for dominant color */
  background-color: var(--dominant-color);
}

/* Header and Footer */

header a,
footer a {
  text-decoration: none;
}

/* Headings */

h1,
h2,
h3 {
  font-weight: 800;
  line-height: 1em;
  text-wrap: balance;
  text-wrap: pretty; /* Progessive enhancement */
  filter: url(#glitch);
}

h1 {
  font-size: var(--size-step-4);
}

h2 {
  font-size: var(--size-step-3);
  background: var(--color-highlight);
  clip-path: polygon(0% 5%, 98% 0, 100% 100%, 1% 92%, 0% 5%);
  padding: 0.5em;
  border-right: 15px solid var(--color-dark);
  border-bottom: 15px solid var(--color-dark);
}

h2 a {
  display: inline-block;
  transform: rotate(-1.5deg);
  text-decoration: none;
}

h3 {
  font-size: var(--size-step-2);
}

/* Links */

a {
  color: currentColor;
  -webkit-text-decoration-color: var(--color-neonpink);
  text-decoration-color: var(--color-neonpink);
}

a:hover {
  color: var(--color-neonpink);
}

/* Navigation */

#site-navigation {
  width: 100%;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
#site-navigation:before {
  position: absolute;
  z-index: -1;
  content: "";
  background: var(--color-dark);
  transform: rotate(0.5deg) translateX(10px) translateY(15px) skewX(4deg)
    skewY(-2deg);
  left: -18px;
  top: -3px;
  width: 100%;
  height: 47px;
  filter: drop-shadow(4px 4px 0 var(--color-neonpink))
    drop-shadow(-4px -4px 0 var(--color-primary))
    drop-shadow(2px 4px 0 var(--color-highlight));
}
.primary-menu-hamburger span,
.primary-menu-hamburger span::before,
.primary-menu-hamburger span::after {
  display: block;
  height: 2px;
  width: 26px;
  transition: 0.6s ease;
}
.primary-menu-checkbox:checked
  ~ .menu-menu-1-container
  li
  .primary-menu-hamburger
  span {
  background-color: transparent;
}
.primary-menu-checkbox:checked
  ~ .menu-menu-1-container
  li
  .primary-menu-hamburger
  span::before,
.primary-menu-checkbox:checked
  ~ .menu-menu-1-container
  li
  .primary-menu-hamburger
  span::after {
  margin-top: 0;
}
.primary-menu-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 58px;
}
.primary-menu-hamburger {
  margin-left: auto;
}
.primary-menu-brand {
  font-size: var(--size-step-2);
  padding: 18px 24px 18px 24px;
}
.menu-menu-1-container {
  min-height: 58px;
  transition: 0.6s ease;
  width: 100%;
  background-color: var(--color-neonpink);
  color: var(--color-light);
}
.menu-menu-1-container .active,
.menu-menu-1-container .current-post-ancestor:hover,
.menu-menu-1-container .current-page-ancestor:hover,
.menu-menu-1-container .menu-item:hover {
  color: var(--color-dark);
  background-color: var(--color-highlight);
}
.menu-menu-1-container .active a,
.menu-menu-1-container .current-post-ancestor:hover a,
.menu-menu-1-container .current-page-ancestor:hover a,
.menu-menu-1-container .menu-item:hover a {
  border-bottom: 14px solid var(--color-dark);
  padding-bottom: 14px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 81%, 0 0);
}
.menu-menu-1-container .current-menu-item,
.menu-menu-1-container .current-post-ancestor,
.menu-menu-1-container .current-page-ancestor {
  color: var(--color-dark);
}
#primary-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-weight: 800;
}
.menu-menu-1-container a,
.menu-item a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.menu-item {
  height: 58px;
}
.menu-item a {
  padding: 12px 24px 12px 24px;
  display: block;
}
.primary-menu-hamburger {
  padding: 12px 24px 12px 24px;
  position: relative;
  cursor: pointer;
}
.primary-menu-hamburger span::before,
.primary-menu-hamburger span::after {
  content: "";
  position: absolute;
}
.primary-menu-hamburger span::before {
  margin-top: -8px;
}
.primary-menu-hamburger span::after {
  margin-top: 8px;
}
.primary-menu-checkbox {
  display: none;
}
.primary-menu-checkbox:not(:checked) ~ .menu-menu-1-container {
  overflow: hidden;
  height: 58px;
}
.primary-menu-checkbox:checked ~ .menu-menu-1-container {
  transition: height 0.6s ease;
  height: 100vh;
  position: relative;
  z-index: 1000;
  overflow: auto;
}
@media screen and (min-width: 768px) {
  #primary-menu {
    flex-flow: row;
    justify-content: flex-end;
  }
  .primary-menu-hamburger {
    display: none;
  }
  .primary-menu-checkbox:not(:checked) ~ .menu-menu-1-container {
    overflow: visible;
  }
  .primary-menu-checkbox:checked ~ .menu-menu-1-container {
    height: 58px;
  }
  .menu-menu-1-container .menu-item {
    border-top: 0;
  }
  .primary-menu-header {
    margin-right: auto;
  }
  .menu-menu-1-container .current-menu-item,
  .menu-menu-1-container .active,
  .menu-menu-1-container
    .current-post-ancestor
    .menu-menu-1-container
    .current-page-ancestor,
  .menu-menu-1-container .menu-item:hover {
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0 100%);
  }
  .menu-menu-1-container
    .current-menu-item:last-of-type
    .menu-menu-1-container
    .active:last-of-type,
  .menu-menu-1-container .current-post-ancestor:last-of-type,
  .menu-menu-1-container .current-page-ancestor:last-of-type,
  .menu-menu-1-container .menu-item:last-of-type:hover {
    clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0 100%);
  }
  .pagination ul,
  footer ul {
    text-align: center;
  }
}
.primary-menu-checkbox:checked
  + .menu-menu-1-container
  .primary-menu-hamburger
  span::before {
  transform: rotate(225deg);
}
.primary-menu-checkbox:checked
  + .menu-menu-1-container
  .primary-menu-hamburger
  span::after {
  transform: rotate(-225deg);
}
.menu-menu-1-container .primary-menu-hamburger span,
.menu-menu-1-container .primary-menu-hamburger span::before,
.menu-menu-1-container .primary-menu-hamburger span::after {
  background-color: #fff;
}

.pagination ul {
  list-style: none;
  font-size: var(--size-step--1);
}

#colophon {
  padding-bottom: 0;
}

footer ul {
  font-size: var(--size-step--2);
}

footer li {
  display: inline-block;
}

/* Utilities */

article > * + * {
  -webkit-margin-before: var(--flow-space, 1em);
  margin-block-start: var(--flow-space, 1em);
}

.alignleft {
  float: left;
  justify-self: start;
  margin-right: 1em;
}

.alignright {
  float: right;
  justify-self: end;
  margin-left: 1em;
}

.hidden {
  display: none;
}

@media screen and (max-width: 479px) {
  .alignleft,
  .alignright {
    margin: 1em 0;
    width: 100%;
    height: auto;
    max-width: 100%;
    float: none;
  }
}

/* Flow and Rythm */

:is(h1, h2, h3, article blockquote) {
  --flow-space: 1.5em;
}

:is(h1, h2, h3) + * {
  --flow-space: 0.5em;
}

/* Contents */

header,
article,
footer {
  padding-bottom: 1.5em;
  font-size: 1.5rem;
  line-height: 2rem;
  text-wrap: balance;
}

article hr {
  margin: 3em 0;
  height: 2px;
  background: #ddd;
}

article ul,
article ol {
  margin-bottom: 0;
}

article a {
  filter: drop-shadow(0 0 1px var(--color-highlight));
}

article h2 a {
  filter: url(#glitch);
}

article img.wp-post-image,
article figure img,
.post-thumbnail article figure iframe,
article figure video,
article .embed-privacy-container {
  border-radius: 3px;
  filter: drop-shadow(4px 4px 0 var(--color-neonpink))
    drop-shadow(-4px -4px 0 var(--color-primary))
    drop-shadow(2px 4px 0 var(--color-highlight));
}

@keyframes fadeOutInvert {
  from {
    filter: saturate(1.5) contrast(1.5) hue-rotate(-240deg);
  }
  to {
    filter: saturate(1) contrast(1) hue-rotate(0deg);
  }
}

article div.post-thumbnail,
article figure {
  filter: saturate(1.5) contrast(1.5) hue-rotate(-240deg);
  animation: fadeOutInvert 1s ease forwards;
}

article .entry-meta {
  font-size: 0.75rem;
  color: #9e9e9e;
}

.wp-block-embed {
  margin-bottom: 1.5em;
}

article blockquote {
  background-color: #f9f9f9;
  border-left: 0.3em solid var(--color-neonpink);
  margin: 1.5em 0 1.5em 0;
  padding: 2.5em 1.5em 0.1em 2.5em;
  position: relative;
  border-radius: 3px;
  font-size: var(--size-step-1);
}

article blockquote cite {
  font-size: var(--size-step--2);
}

article blockquote:before,
article blockquote:after {
  color: var(--color-neonpink);
  font-size: var(--size-step-5);
  position: absolute;
}

article blockquote:before {
  content: "\201C";
  left: 5px;
  top: 0.5em;
}

article blockquote:after {
  content: "\201D";
  right: 3px;
  bottom: 0em;
}

article blockquote p {
  font-size: var(--size-step-0);
  font-style: italic;
  margin-top: -2em;
}

article li {
  margin: 0 0 1.5em 1em;
  list-style: disc none outside;
}

article li ul li,
article li ul li {
  margin: 1.5em 0 1.5em 1em;
  list-style: circle none outside;
  font-size: var(--size-step-0);
}