/* general page styling */
:root {
  --main-bg-color: oklch(1% 0 0);
  --main-bg-contrast-color: oklch(40% 0 0);
  --main-text-color: oklch(92% 0 none);
  --main-accent-color: #f9c827;
  --secondary-accent-color: #ff925f;

  /* Tell browser that we support dark and light mode.
     Allows browser to change UI elements to match the color scheme.
     By default browser assume only light mode is supported and draw elements accordingly.
     This for example includes the chrome scrollbar and default form elements. */
  color-scheme: dark light;
  scroll-behavior: smooth;
}

@media (prefers-color-scheme: light) {
  :root {
    --main-bg-color: oklch(99% 0 0);
    --main-bg-contrast-color: oklch(90% 0 0);
    --main-text-color: oklch(15% 0 0);
    --main-accent-color: oklch(40.8% 0.074 45);
    --secondary-accent-color: oklch(85.13% 0.1737 89.73);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;

  background-color: var(--main-bg-color);
  color: var(--main-text-color);

  margin: 3rem;
  margin-top: 0;
}

a {
  color: var(--main-accent-color);

  &:hover,
  &:focus {
    color: var(--secondary-accent-color);
  }
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

img {
  display: block;

  &.small {
    max-height: 10em;
    width: auto;
  }
}

h1 {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.5em;
  color: var(--main-accent-color);
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.2rem;
}

/* page header */

#space-image {
  height: 8vh;
  transition: height 0.2s;

  &:hover {
    height: 11vh;
  }
}

#header-image {
  max-height: 100%;
}

header {
  pointer-events: none;
  display: grid;
  grid-template:
    "logo . nav        nav"
    "logo . space-text space-image" min-content
    "logo . .          ." min-content /
    minmax(min-content, 25vw) 1fr auto minmax(0, min-content);
  overflow: hidden;

  * {
    pointer-events: initial;
  }

  #logo {
    grid-area: logo;
  }
  nav {
    grid-area: nav;
  }
  #space-text {
    grid-area: space-text;
    text-align: right;
    margin-right: 1em;
  }
  #space-image-container {
    grid-area: space-image;
  }
  #menu-button {
    display: none;
  }
  #menu-label {
    display: none;
  }
  #menu-checkbox {
    display: none;
  }
}

@media screen and (width > 1700px) {
  header {
    position: fixed;
    /* subtract exactly the margins to get the 100% horizontal fill we need */
    width: calc(100vw - 2 * 3em);
  }
}

/* mobile header, just some vertical rearranging and smaller margins */
@media screen and (width < 650px) {
  body {
    margin: 1.5rem;
    margin-top: 0;
  }

  header {
    grid-template:
      "logo hamburger-menu" minmax(3cm, 10vh)
      "nav nav"
      "space-text space-image" min-content /
      auto min-content;

    #space-image-container {
      margin-top: auto;
      margin-bottom: auto;
      margin-left: auto;
    }
  }

  nav {
    transition:
      max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
      margin 0.2s cubic-bezier(0.86, 0, 0.07, 1);
    overflow-y: hidden;
    height: auto;
  }

  /* hamburger menu */
  #menu-checkbox:not(:checked) ~ nav {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  #menu-checkbox:checked ~ nav {
    max-height: 40vh;
  }
  #menu-label {
    grid-area: hamburger-menu;
    display: block !important;
    margin: auto;
    margin-bottom: 1em;
    height: 1.2em;
    width: 2em;
  }
  #menu-button {
    display: block !important;
    margin-top: 0.5em;

    &,
    &::before,
    &::after {
      display: block;
      background-color: var(--main-text-color);
      position: absolute;
      height: 0.2em;
      width: 2em;
      transition: all 200ms ease-in-out;
      border-radius: 2px;
    }

    &::before {
      content: "";
      margin-top: -0.5em;
    }

    &::after {
      content: "";
      margin-top: 0.5em;
    }
  }
  #menu-checkbox:checked + #menu-label #menu-button {
    background: transparent;
    &::before {
      margin-top: 0;
      transform: rotate(45deg);
    }

    &::after {
      margin-top: 0;
      transform: rotate(-45deg);
    }
  }
}

/* skip to content element, lots of positioning styles copied from html5-boilerplate */
#skip-header {
  background: var(--main-bg-color);
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;

  &:active,
  &:focus {
    clip: auto;
    height: auto;
    margin: 1em;
    overflow: visible;
    white-space: inherit;
    width: auto;
  }
}

nav {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  margin: 1em;

  a {
    height: min-content;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--main-text-color);
    margin-left: 1em;
    margin-bottom: 0.4em;
    text-transform: uppercase;
    text-decoration: underline 0.15em var(--main-text-color);
    transition:
      text-decoration-color 0.3s,
      color 0.25s;

    &:focus,
    &:hover {
      text-decoration-color: var(--main-accent-color);
      color: var(--main-accent-color);
    }
  }
}

/* main grid */

main {
  display: grid;
  grid-template: ". content ." auto / 1fr minmax(min-content, 45rem) 1fr;

  section {
    grid-area: content;
  }

  img {
    height: auto;
    max-width: 100%;
    border-radius: 1em;
  }
}

footer {
  background-color: var(--main-bg-color);
  text-align: center;
  padding-top: 1.5em;
  margin-top: 1.5em;
  font-weight: bold;
  border-top: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    transparent,
    var(--secondary-accent-color),
    transparent
  );
  border-image-slice: 1;
}

/* calendar */

#dbkcalendar {
  * {
    border-radius: 0.25em;
  }

  .calendar-date th {
    padding: 0.5em 1em;
    background: var(--main-bg-contrast-color);
  }
  td {
    padding: 1em;
  }
  p {
    margin: 0;
    max-height: min-content;

    &.categories {
      margin-top: 0.2em;

      em {
        background-color: var(--main-accent-color);
        padding: 0 0.25em;
        font-style: normal;
        font-weight: bold;
        color: var(--main-bg-color);
      }
    }
  }
}

em.summary {
  font-style: normal;
  font-weight: bold;
}

table {
  border-spacing: 0;
  border-collapse: collapse;

  * {
    text-align: left;
    vertical-align: top;
  }
}