/* general */
:root {
  --color-black: #000;
  --color-white: #fff;
  --color-gray-100: #f7f7f7;
  --color-gray-200: #e6e9ee;
  --color-gray-300: #dde0e4;
  --color-gray-400: #818890;
  --color-gray-500: #535661;
  --color-gray-600: #4b4c53;
  --color-gray-700: #3a3d4a;
  --color-gray-800: #2e3039;
  --color-gray-900: #1f2028;
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-100);
  --color-bg-tertiary: var(--color-white);
  --color-highlight: #fa7d43;
  --color-line-primary: var(--color-gray-200);
  --color-line-secondary: var(--color-gray-300);

  --spacing-unit: clamp(8px, 0.5vw, 100px);
  --hamburger-line-thickness: 0.15rem;
  --header-height: 70px;
  --content-width: 1200px;
  --border-radius: calc(var(--spacing-unit) * 2);
  --small-screen-break: 768px;

  --font-size: 14pt;
  --title-font-family: "Inter";
  --text-color: var(--color-gray-800);
  --text-color-muted: var(--color-gray-600);
}

html.dark {
  --color-bg-primary: var(--color-gray-900);
  --color-bg-secondary: var(--color-gray-800);
  --color-bg-tertiary: var(--color-gray-700);
  --color-line-primary: var(--color-gray-700);
  --color-line-secondary: var(--color-gray-500);
  --text-color: var(--color-gray-200);
  --text-color-muted: var(--color-gray-400);
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: "Inter var", sans-serif;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 300;
  font-size: var(--font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  accent-color: var(--color-highlight);
  background-color: var(--color-bg-primary);
}

a {
  color: var(--text-color);
  transition: all 0.2s ease-out !important;
  &:hover {
    color: var(--color-highlight) !important;
  }
}

h2 {
  font-weight: 700;
  font-family: var(--title-font-family), system-ui, sans-serif;
  font-size: calc(var(--font-size) * 2);
}

ul {
  list-style-type: none;
  padding: 0;
}

code,
kbd,
samp,
pre {
  /* see https://github.com/system-fonts/modern-font-stacks?tab=readme-ov-file#monospace-code */
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

svg {
  width: 1.1em;
  height: 1.1em;
}

/* dark/light selector */
.dark-light-selector {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  display: none;
}

.dark-light-selector--visible {
  display: block;
}

/* header */

.header {
  height: var(--header-height);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--color-bg-primary);
  border-bottom: solid var(--color-line-primary) 0.5px;
}

.header--visible {
  display: block;
}

.header__content {
  max-width: var(--content-width);
  padding: 0 calc(var(--spacing-unit) * 5);
  height: 100%;
  display: flex;
}

.header__content .header__logo,
.header__content .header__menu {
  flex: 1 1 auto;
}

.header__content .header__logo {
  font-size: calc(var(--font-size) * 2);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-highlight);
  /*center text vertically*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*logo*/
  background-image: url(/img/logo.png);
  background-size: contain;
  background-position: left;
  margin: var(--spacing-unit) 0;
}

/* main menu */

.main-menu-wrapper {
  height: 100%;
  /*align hamburger lines right*/
  display: flex;
  flex-direction: row;
  justify-content: end;
}

nav {
  width: 100%;
  position: fixed;
  left: 0;
  top: var(--header-height);
  background-color: var(--color-bg-primary);
  overflow: hidden;

  max-height: 0;
  transition: max-height 0.5s ease-out;
}

nav li {
  padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 5);
}

nav ul {
  margin: 0;
}

nav a {
  display: block;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 400;
}

/* Menu Icon */
.hamburger-label {
  cursor: pointer;
  height: 100%;
  float: right;
  /*center hamburger lines vertically*/
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hamburger-lines {
  background: var(--text-color);
  display: block;
  height: var(--hamburger-line-thickness);
  position: relative;
  width: 1.2rem;
}

.hamburger-lines::before,
.hamburger-lines::after {
  background: var(--text-color);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
.hamburger-lines::before {
  top: calc(var(--hamburger-line-thickness) * 2);
}
.hamburger-lines::after {
  top: calc(var(--hamburger-line-thickness) * 2 * -1);
}

.menu-checkbox {
  display: none;
}

/* Toggle menu icon */
.menu-checkbox:checked ~ nav {
  max-height: 100%;
  overscroll-behavior: none;
}
.menu-checkbox:checked ~ .hamburger-label .hamburger-lines {
  background: transparent;
}
.menu-checkbox:checked ~ .hamburger-label .hamburger-lines::before {
  transform: rotate(-45deg);
  top: 0;
}
.menu-checkbox:checked ~ .hamburger-label .hamburger-lines::after {
  transform: rotate(45deg);
  top: 0;
}

@media (min-width: 768px) {
  .main-menu-wrapper {
    /*center menu items vertically*/
    flex-direction: column;
    justify-content: center;
  }

  nav {
    max-height: unset;
    position: relative;
    width: 100%;
    margin-top: unset;
    top: unset;
  }

  nav li {
    padding: var(--spacing-unit) 0;
  }

  nav ul {
    display: flex;
    gap: calc(var(--spacing-unit) * 4);
    justify-content: flex-end;
  }

  nav a,
  nav div.target {
    text-shadow: none;
    transition: all 0.2s ease-out;
  }
  nav a:hover,
  nav div.target:hover {
    background-color: transparent;
    color: var(--color-highlight);
  }

  nav a span.label,
  nav div.target span.label {
    display: none;
  }

  .hamburger-label {
    display: none;
  }
}

/* sections */

.section {
  max-width: var(--content-width);
  padding: calc(var(--spacing-unit) * 5);
  margin-bottom: calc(var(--spacing-unit) * 20);
}

/* intro */
.section__intro-container .flag {
  font-size: larger;
}
.section__intro-title {
  margin-top: calc(var(--spacing-unit) * 20);
}

.section__intro-title--collapsed {
  margin: 0;
  width: 100%;
}

.section__intro-title-text {
  font-size: calc(var(--font-size) * 3);
  font-weight: 700;
  transition: 0.4s;
  font-family: var(--title-font-family), sans-serif;
}

.section__intro-title-text--collapsed {
  font-size: 1em;
}

.section__intro-menu {
  transition: 0.4s;
  display: flex;
  gap: calc(var(--spacing-unit) * 2);

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

/* employers */

.section__employers {
  & .employer-logos {
    display: flex;
    gap: clamp(10px, calc(var(--spacing-unit) * 8), 55px);

    @media (max-width: 768px) {
      & {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 4);
      }
    }
  }
  & .employer-logos__logo {
    flex: 1 1 calc(100% / 7); /* dfault flex-basis is 100% / 7 logos */
    align-self: center;
    text-align: center;

    img[src$=".svg"] {
      width: 100%;
    }

    @media (max-width: 768px) {
      & {
        align-self: unset;
      }
    }
  }

  & img.light,
  & img.dark {
    display: none;
  }

  & .employer-logos__logo.tab {
    flex-basis: 7%;
    img {
      margin-top: -2%;
    }
    @media (max-width: 768px) {
      img {
        width: 45%;
      }
    }
  }
  & .employer-logos__logo.anz {
    flex-basis: 13%;
    @media (max-width: 768px) {
      img {
        width: 60%;
      }
    }
  }
  & .employer-logos__logo.fnz {
    flex-basis: 8%;
    @media (max-width: 768px) {
      img {
        width: 45%;
      }
    }
  }
  & .employer-logos__logo.eagle {
    img {
      margin-top: -2%;
    }
  }
  & .employer-logos__logo.isac {
    flex-basis: 10%;
    @media (max-width: 768px) {
      img {
        width: 45%;
      }
    }
  }
  & .employer-logos__logo.trademe {
    flex-basis: 17%;
  }
  & .employer-logos__logo.gosweetspot {
    flex-basis: 17%;
    img {
      margin-top: 13%;
    }
  }

  & .employer-logos__logo.fnz,
  & .employer-logos__logo.eagle,
  & .employer-logos__logo.tab {
    html.light & img.light {
      display: inline-block;
    }
    html.dark & img.dark {
      display: inline-block;
    }
  }
  & .more {
    text-align: center;
  }
}

/* tech */

.section__tech {
  border-radius: var(--border-radius);
}

.section__tech .subsection {
  border-bottom: solid var(--color-line-primary) 1px;
  padding: calc(var(--spacing-unit) * 2) 0;
}

.section__tech .subsection:last-child {
  border: none;
}

.section__tech .subsection ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 2);
}

.section__tech .subsection ul li {
  width: 250px;
}

.section__tech .section__tech-logo {
  width: 2em;
  height: 2em;
  margin-right: var(--spacing-unit);
}

.section__tech .section__generic-tech-logo {
  display: inline-block;
  width: 2em;
  height: 2em;
  background-color: var(--color-gray-200);
  border-radius: 5em;
  color: white;
  font-weight: bold;
  margin-right: var(--spacing-unit);
  /*centering*/
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

html.dark .section__tech .section__generic-tech-logo {
  background-color: var(--color-gray-600);
}

.section__tech .view-past-tech-btn-container {
  margin-top: calc(var(--spacing-unit) * 4);
}

/* contact form */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 4);

  .fields {
    display: flex;
    flex-direction: row;
    gap: calc(var(--spacing-unit) * 4);

    @media (max-width: 768px) {
      & {
        flex-direction: column;
      }
    }
  }
  .fields > * {
    flex: 1 1 auto;
  }

  input,
  textarea {
    border-radius: calc(var(--border-radius) * 0.25);
    border: solid 1px var(--color-line-primary);
    padding: calc(var(--spacing-unit) * 2);
    font-size: 85%;

    &:focus {
      outline: 0;
      border-color: var(--color-highlight);
    }
  }

  textarea {
    min-height: 200px;
  }

  &.submitted {
    input,
    textarea {
      &:required {
        &:invalid {
          border-color: red;
        }
      }
    }
  }
}

/* footer */
.footer {
  margin-bottom: 0;
}

/* utilities */

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

.bg-secondary {
  background-color: var(--color-bg-secondary);
}

.centered {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.muted {
  color: var(--text-color-muted);
  a {
    color: var(--text-color-muted);
  }
}