@import './reset.css';
@import './colour.css';
@import './type.css';

@view-transition {
  navigation: auto;
}

/*
* [TODO][MX]
* update hover states for navs with keyboard focus
*/

body {
  --menu-padding: 1em;
  --menu-width: 10vw;
  --menu-content-width:calc(var(--menu-width) - calc(var(--menu-padding) * 2));

  font-family: var(--font-family, sans-serif);
  /* line-height: 1.12; */

  color: light-dark(var(--neutral-900), var(--neutral-100));
  background-color: light-dark(var(--neutral-100), var(--neutral-900));

  max-height: 100svh;

  display: grid;
  grid-template-rows: var(--fs-800) 1fr;
  grid-template-areas:
    'n m x'
    'n m g';

  grid-template-columns: auto calc(70ch + 2em) 1fr;
  transition: grid-template-columns 0.5s ease;
}

nav {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-auto-flow: column;
  grid-area: n;
  font-size: var(--fs-500);

  alx-nav {
    grid-row: 1 / -1;
    background-color: light-dark(var(--neutral-100), var(--neutral-900));
  }

  a {
    color: light-dark(var(--neutral-900), var(--neutral-100));
    text-decoration: none;
  }

  ul {
    li {
      padding-block: .5em;
      padding-inline: var(--menu-padding);
      line-height: 1.1;
      text-wrap: balance;

      &:not(:last-child) {
        border-bottom: dotted thin light-dark(var(--tonal-900), var(--tonal-100));
      }

      > :where(a, span) {
        line-height: 0.5;
      }

      &:hover {
        background: light-dark(var(--neutral-900), var(--neutral-100));
        > a {
          color: light-dark(var(--neutral-100), var(--neutral-900));
        }
      }

      &:has(.active) {
        background: light-dark(var(--neutral-900), var(--neutral-100));
        color: light-dark(var(--neutral-100), var(--neutral-900));
      }
    }
  }

  .controls {
    grid-column: 1 / 2;
    position: absolute;
    bottom: 1em;
    left: 1em;
    right: 1em;

    display: flex;
    justify-content: center;
    align-items: space-around;
    font-size: var(--fs-400);
    font-weight: 600;

    container-type: inline-size;
    container-name: controls;

    .lang {
      padding-inline: 0.5em;
    }
  }
}

.noPageTransition {
  view-transition-name: --subnav;
}

body.dark {
  color-scheme: dark;
}

body.light {
  color-scheme: light;
}

body > main {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  padding: 1em;

  view-transition-name: --main;
  overflow-x: hidden;

  .meta span:has(+ span)::after {
    content: '•';
    display: inline-block;
    padding-inline: 1ch;
  }

  > article {
    grid-row: 2;
    width: 70ch;

    header {
      .meta {
        font-size: var(--fs-500);
        margin-block: 0.75em 0.5em;
      }
    }

    display: grid;
    gap: 1em;
    align-content: start;
  }

  &:has(~ alx-gallery) {
    border-inline-end: thin solid light-dark(var(--tonal-100), var(--tonal-900));
  }
}

body:has(input[name="gallery"]:checked) {
  grid-template-columns: auto 5em 1fr;
}

::view-transition-new(--gallery) {
  animation: slideIn 0.25s ease-out;
}

::view-transition-old(--gallery) {
  animation: slideOut 0.25s ease-in;
}

::view-transition-group(--primary-nav) {
  animation: none;
  z-index: 1;
}
::view-transition-new(--art-nav) {
  height: 100vh;
  animation: navSlideIn .25s linear;
}

::view-transition-old(--art-nav) {
  animation: none;
}

@keyframes navSlideIn {
  from {
    translate: -15vw 0;
  }
}

@keyframes navSlideOut {
  to {
    translate: -15vw 0;
  }
}


@keyframes slideIn {
  from {
    translate: 100vw 0;
  }
}

@keyframes slideOut {
  to {
    translate: 100vw 0;
  }
}

/* CV */
.cv {
    display: grid;
  gap: 1em;
  padding: 1em;
  max-width: var(--max-char-width);

  p {
    margin: 0;
  }

  .sub {
    display: grid;
    gap: 0.25em;
    grid-template-columns: 1fr .4fr;

    .contact > * {
      display: block;
      width: fit-content;
    }
  }

  h3 {
    font-size: 1.5em;
    font-style: italic;
    color: light-dark(var(--tonal-900), var(--tonal-100));
  }

  .experience-item {
    padding-block-end: 1em;

    &:not(:where(:last-child, :has(+ h3))) {
      border-block-end: thin dotted light-dark(var(--tonal-100), var(--tonal-900));
    }

    h4 {
      margin: 0;
      font-size: 1.25em;
    }

    .skills {
      list-style: none;
      margin: 1em 0;

      li {
        display: inline-block;
        padding: 0;
      }

      li:before {
        padding: .25em;
      }
    }

    header {
      padding-block-end: 1em;
    }

    aside {
      grid-area: a;
      display: flex;
      flex-direction: column;

      .position {
        /* font-weight: 900; */
        font-style: italic;
      }

      .meta {
        opacity: .5;
      }

      .meta {
        margin-block-start: auto;
      }

      .meta:last-child, .location {
        margin-block-end: 1em;
      }
    }

    main {
      grid-area: m;
    }
  }
}

/* PRINT */
.printOnly {
  display: none;
}