/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
  background: light-dark(var(--surface-1), var(--gray-11));
  font-family: var(--font-classical-humanist);
}

body {
  display: grid;
  place-content: center;
  padding-block-end: var(--size-8);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes slide-fade-in {
  from {
    opacity: 0;
    transform: translateY(5vh);
  }
}

main :is(h2, h3, p, dt, dd, button, li) {
  @media not print {
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        animation: slide-fade-in linear both;
        animation-timeline: view();
        animation-range: entry-crossing 50% entry-crossing calc(50% + 100px);
      }
    }
  }
}

/* ==========================================================================
   Transitions
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  h1,
  .pronunciation,
  .contact,
  .print-prompt,
  .about,
  .experience h2,
  .experience article,
  .education,
  .projects,
  .additional {
    animation: none;
    transition: opacity 1s var(--ease-spring-3),
      transform 1s var(--ease-spring-3);

    @starting-style {
      opacity: 0;
      transform: translateY(5vh);
    }
  }

  h1 {
    transition-delay: 0ms;
  }

  .pronunciation {
    transition-delay: 25ms;
  }

  .contact {
    transition-delay: 50ms;
  }

  .print-prompt {
    transition-delay: 75ms;
  }

  .about {
    transition-delay: 100ms;
  }

  .experience h2 {
    transition-delay: 200ms;
  }

  /* Replace with sibling-index() when available */
  .experience article:nth-of-type(1) {
    transition-delay: 225ms;
  }

  .experience article:nth-of-type(2) {
    transition-delay: 250ms;
  }

  .experience article:nth-of-type(3) {
    transition-delay: 275ms;
  }

  .experience article:nth-of-type(4) {
    transition-delay: 300ms;
  }

  .experience article:nth-of-type(5) {
    transition-delay: 325ms;
  }

  .education {
    transition-delay: 400ms;
  }

  .projects {
    transition-delay: 450ms;
  }

  .additional {
    transition-delay: 500ms;
  }
}

/* ==========================================================================
   Main Layout
   ========================================================================== */

main {
  display: grid;
  gap: var(--size-6);
  padding: 10vh var(--size-3);
  max-inline-size: calc(var(--size-content-3) + 15ch);

  grid-template-areas:
    "title"
    "pronunciation"
    "contact"
    "print-prompt"
    "about"
    "experience"
    "education"
    "projects"
    "additional";

  @media (max-width: 840px) {
    gap: var(--size-4);
    padding: 5vh var(--size-3);
  }

  h1 {
    font-size: var(--font-size-fluid-3);
    text-box: cap alphabetic;
  }

  h2 {
    margin-block-start: var(--size-4);
    font-size: var(--font-size-fluid-1);
    border-block-end: 1px solid var(--link);
    padding-block-end: var(--size-1);
    max-inline-size: inherit;
  }

  h3 {
    color: var(--text-2);
    margin-block-start: var(--size-4);
    font-size: var(--font-size-3);
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

main > header {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

.title {
  grid-area: title;
}

.pronunciation {
  grid-area: pronunciation;
  display: flex;
  align-items: center;
  gap: 0.5ch;
  font-size: var(--font-size-1);
  color: var(--text-2);
  margin-block-start: calc(var(--size-1) * -1);
  margin-block-end: 0;

  > a {
    display: flex;
    align-items: center;
    text-decoration: none;

    > img {
      width: 0.75lh;
      height: 0.75lh;
      flex-shrink: 0;
    }
  }

  @media (prefers-color-scheme: dark) {
    > a > img {
      filter: invert(1);
    }
  }
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul {
  display: grid;
  gap: var(--size-1);
  margin-block-start: var(--size-1);
  padding-inline-start: var(--size-3);

  li {
    max-inline-size: var(--size-content-3);
    text-wrap: pretty;
  }
}

/* ==========================================================================
   Contact Section
   ========================================================================== */

.contact {
  grid-area: contact;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2ch;
  font-size: var(--font-size-2);

  > div {
    display: flex;
    align-items: center;
    gap: 0.5ch;

    > img {
      width: 0.75lh;
      height: 0.75lh;
      flex-shrink: 0;
    }

    @media (prefers-color-scheme: dark) {
      > img {
        filter: invert(1);
      }
    }
  }

  /* 510px is the approximate width of the content of contact.
    Below that change to column view */
  @media (max-width: 510px) {
    flex-direction: column;
    gap: var(--size-1);
  }
}

/* ==========================================================================
   About Section
   ========================================================================== */

.about {
  grid-area: about;
  display: grid;
  gap: var(--size-4);

  > p {
    font-size: var(--font-size-2);
    max-inline-size: 100%;
  }
}

/* ==========================================================================
   Education Section
   ========================================================================== */

.education {
  grid-area: education;

  dl {
    display: grid;
    gap: var(--size-3);
    margin-block-start: var(--size-4);

    > div {
      display: grid;
      grid-template-columns: 1fr auto;

      > dd:nth-child(even) {
        place-self: end;
        font-size: var(--font-size-1);
      }
    }

    dd {
      font-size: var(--font-size-2);
      color: var(--text-2);
    }

    .degree {
      display: inline-flex;
      margin-inline-end: var(--size-1);
      font-size: var(--font-size-0);
      padding: 0.1em 0.6em;
      border-radius: var(--radius-3);
      border: 1px solid light-dark(var(--surface-3), var(--surface-1));
      background-color: light-dark(white, var(--surface-3));
      text-transform: uppercase;
      text-box: cap alphabetic;
    }

    .certification {
      display: flex;
      align-items: center;
    }
  }
}

/* ==========================================================================
   Experience Section
   ========================================================================== */

.experience {
  grid-area: experience;

  article {
    + article:not(:has(header > h3)) header {
      margin-block-start: var(--size-2);
    }

    > p {
      font-size: var(--font-size-2);
      color: var(--text-2);
    }
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-block-start: var(--size-4);

    > h3 {
      display: flex;
      flex-wrap: wrap;
      gap: var(--size-2);
      place-items: center;
      margin-block-start: 0;
    }

    p:nth-child(even) {
      place-self: end;
      color: var(--text-2);
    }
  }

  ul {
    display: grid;
    margin-block-start: var(--size-1);
    padding-inline-start: var(--size-3);
    font-size: var(--font-size-1);
  }
}

/* ==========================================================================
   Additional & Projects Sections
   ========================================================================== */
.projects,
.additional {
  h2 {
    margin-block-end: var(--size-2);
  }

  dd,
  dt,
  li {
    font-size: var(--font-size-1);
  }

  dd {
    max-inline-size: 100%;
    margin-block-start: var(--size-1);
  }
}

.additional {
  grid-area: additional;
}

.projects {
  grid-area: projects;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.inline-divider {
  margin-inline: var(--size-1);
  font-weight: 100;
  color: var(--text-2);
}

.print-prompt {
  grid-area: print-prompt;

  width: 100%;
  color: var(--text-1);
  background-color: var(--surface-3);
  &:hover {
    outline: 1px var(--gray-5) solid;
    box-shadow: none;
  }
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.invisible-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  &:hover,
  &:focus {
    color: inherit;
    text-decoration: none;
  }
}

/* Focus indicators for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

a:focus-visible:not(.skip-link) {
  text-decoration: underline;
}

/* ==========================================================================
   Skip Link (Accessibility)
   ========================================================================== */

.skip-link {
  position: absolute;
  display: block;
  width: fit-content;
  top: -100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: var(--link);
  color: white;
  padding: var(--size-2) var(--size-4);
  text-decoration: none;
  z-index: 10;
  border-radius: 0 0 var(--radius-2) 0;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  :root {
    --print-page-block: 1.5cm;
    --print-left-col: 6fr;
    --print-right-col: 2fr;
  }

  @page {
    size: A4 portrait;
    margin: var(--print-page-block);
  }

  * {
    animation: none !important;
    transition: none !important;
  }

  .no-print {
    display: none !important;
  }

  body {
    padding-block-end: 0;
  }

  main {
    padding: 0;

    h2 {
      margin-block-start: var(--size-0);
    }

    grid-template-columns: var(--print-left-col) var(--print-right-col);
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: var(--size-4);
    row-gap: var(--size-4);

    grid-template-areas:
      "title title"
      "contact contact"
      "about about"
      "experience education"
      "experience projects"
      "experience additional";

    margin-inline: auto;

    .experience,
    .experience article ul li,
    .projects,
    .additional {
      header,
      dt {
        margin-block-start: var(--size-2);
      }
    }
  }

  section.summary {
    ul {
      gap: 5px;

      li b {
        margin: 0;
        padding: 0;
        box-shadow: none;
      }
    }
  }

  .about {
    gap: var(--size-2);
  }

  .education {
    dl {
      margin-block-start: var(--size-2);

      div {
        display: flex;
        flex-direction: column;
        > dd:nth-child(even) {
          place-self: start;
          padding-block-end: var(--size-1);
        }
      }

      .certification {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-1);
      }
    }
  }

  .additional > h2 {
    margin-block-start: 0;
  }

  dt {
    color: var(--text-2);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-6);
  }

  :where(li) {
    padding-inline-start: 0;
  }
}

/* ==========================================================================
   Debug Utilities
   If you see this, you must be really interested in this resume. 👋😅
   ========================================================================== */

.todo {
  color: red !important;

  &::before {
    content: "TODO ";
  }
}