:root {
  --color-bg: hsl(221, 83%, 98%);
  --color-border: hsl(221, 83%, 90%);
  --color-border-alt: hsla(221, 83%, 20%, 0.2);

  --color-primary: hsl(221, 83%, 53%);
  --color-primary-hover: hsl(221, 83%, 47%);
  --color-text-primary: hsl(221, 83%, 24%);

  --color-secondary: hsl(262, 83%, 58%);
  --color-secondary-hover: hsl(262, 83%, 50%);
  --color-text-secondary: hsl(262, 83%, 34%);

  --color-accent: hsl(262, 90%, 66%);

  --color-surface: white;
  --color-surface-alt: hsl(221, 83%, 96%);

  --color-text-muted: hsl(221, 24%, 65%);
  --color-text-inverse: white;

  --color-success: hsl(142, 83%, 38%);
  --color-warning: hsl(38, 83%, 48%);
  --color-error: hsl(0, 83%, 70%);

  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text-primary);
}

.inline {
  display: inline;
}

.block {
  display: block;
}

.hidden {
  display: none;
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  max-width: 1200px;
  margin: auto;
}

#logo img {
  height: 36px;
  width: auto;
}

#nav-toggle {
  display: none;
}

.hamburger {
  cursor: pointer;
}

#menu {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: none;
  flex-direction: column;
  padding: 1rem;
  gap: 0.75rem;
  list-style: none;
  font-size: 1.2rem;

  &[data-isLoggedIn='true'] {
    .publiconly {
      display: none;
    }
  }

  &:not([data-isLoggedIn='true']) {
    .loginonly {
      display: none;
    }
  }

  a {
    display: block;
    width: 100%;
    transition:
      background 150ms var(--transition-timing),
      color 150ms var(--transition-timing);
    pointer-events: all;
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: 500;
    padding: 0.5rem;
    border-radius: 6px;

    &:hover {
      background: var(--color-primary);
      color: var(--color-text-inverse);
    }

    li.active & {
      background: var(--color-primary);
      color: var(--color-text-inverse);

      &:hover {
        background: var(--color-primary);
        cursor: not-allowed;
        opacity: 0.55;
        filter: grayscale(0.25);
      }
    }
  }

  #nav-toggle:checked ~ & {
    display: flex;
  }
}

body[data-isLoggedIn='true'] {
  .publiconly {
    display: none !important;
  }
}

body:not([data-isLoggedIn='true']) {
  .loginonly {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .nav {
    padding: 1rem 1.5rem;
  }

  .hamburger {
    display: none;
  }

  #menu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: none;
    padding: 0;
    gap: 1.5rem;
    pointer-events: none;
  }
}

@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.3s;
  }
}

.btn-primary {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-inverse);
  background: var(--color-primary);

  @media (min-width: 768px) {
    padding: 0.75rem;
  }

  &:hover {
    opacity: 0.95;
    box-shadow: 0 6px 18px hsla(var(--color-primary), 0.35);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.25);
    box-shadow: none;
  }
}

.btn-link {
  margin-top: 0.5rem;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;

  &:visited,
  &.visited {
    color: var(--color-accent);
  }

  &.inline {
    margin: 0px;
  }
}

.btn-action-gradient {
  max-width: 30rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-inverse);
  background: linear-gradient(
    120deg,
    var(--color-primary),
    var(--color-accent)
  );
  transition:
    transform 150ms var(--transition-timing),
    box-shadow 150ms var(--transition-timing),
    opacity 150ms var(--transition-timing);

  &:hover {
    opacity: 0.95;
    box-shadow: 0 6px 18px hsla(var(--color-primary), 0.35);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.25);
    box-shadow: none;
  }
}

.formfield {
  display: grid;
  gap: 0.4rem;
  max-width: 30rem;

  label {
    font-size: 1.2rem;
    font-weight: 600;
  }

  input,
  select {
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
    transition: all 150ms var(--transition-timing);
    font-size: 1.2rem;

    &::placeholder {
      color: var(--color-text-muted);
    }

    &:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px hsla(221, 83%, 53%, 0.15);
    }

    & ~ p {
      color: var(--color-error);
      visibility: hidden;
      font-size: 0.85rem;
      font-weight: 600;
    }

    &:user-valid {
      &,
      &:focus,
      &:focus-within {
        border: 1px solid var(--color-success);
      }
    }

    &:user-invalid {
      &,
      &:focus,
      &:focus-within {
        border: 1px solid var(--color-error);
      }
      & ~ p {
        color: var(--color-error);
        visibility: visible;
      }
    }
  }
}

.formStatus {
  p {
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    font-size: 1.25rem;
    font-weight: 600;

    &.error {
      background-color: var(--color-error);
      color: var(--color-text-inverse);
    }

    &.success {
      background-color: var(--color-success);
      color: var(--color-text-inverse);
    }
  }
}

.accordion {
  display: grid;
  width: 100%;
  grid-template-rows: max-content 0fr;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--color-border-alt);
  --accordion-radius: 1.4rem;
  border-top-left-radius: var(--accordion-radius);
  border-top-right-radius: var(--accordion-radius);
  border-bottom-left-radius: var(--accordion-radius);
  border-bottom-right-radius: var(--accordion-radius);

  & > * {
    width: 100%;
  }

  & > .accordion-title,
  & > input:is([type='radio'], [type='checkbox']) {
    grid-row-start: 1;
    grid-column-start: 1;
    padding: 1rem;
    min-height: 1lh;
    padding-inline-end: 3rem;
    background-color: var(--color-surface);
    border-top-left-radius: var(--accordion-radius);
    border-top-right-radius: var(--accordion-radius);
    border-bottom-left-radius: var(--accordion-radius);
    border-bottom-right-radius: var(--accordion-radius);
    cursor: pointer;
  }

  & > input:is([type='radio'], [type='checkbox']) {
    appearance: none;
    opacity: 0;
    z-index: 1;
  }

  & > .accordion-content {
    content-visibility: hidden;
    grid-column-start: 1;
    grid-row-start: 2;
    min-height: 0;
    padding: 0px 1rem;
    cursor: unset;
    border-bottom-left-radius: var(--accordion-radius);
    border-bottom-right-radius: var(--accordion-radius);
  }

  &:has(> input:is([type='radio'], [type='checkbox']):checked) {
    grid-template-rows: max-content 1fr;
    border-bottom-left-radius: var(--accordion-radius);
    border-bottom-right-radius: var(--accordion-radius);

    & > .accordion-title,
    & > input:is([type='radio'], [type='checkbox']) {
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    & > .accordion-content {
      content-visibility: visible;
      min-height: fit-content;
      padding-bottom: 1rem;
    }
  }
}