/*!
Theme Name: TechTrack
Theme URI: http://underscores.me/
Author: Oliver Udeküll
Author URI: https://sete.ee
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: techtrack
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

TechTrack is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html {
  scroll-behavior: smooth;
}

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

.inner-wrapper {
  max-width: 1700px;
}

.site {
  position: relative;
  min-height: 100dvh;

  display: flex;
  flex-flow: column;
}

.site-header__inner {
  position: relative;
  min-width: 0;
  flex: 1;
  padding: var(--padding) var(--padding-lg);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sizes-header-height);

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--color-bg);
  z-index: var(--z-index-max);
}

.site-header__title,
.hero__title {
  position: absolute;
  width: 0;
  height: 0;

  opacity: 0;
  pointer-events: none;
}

.site-header__logo-container {
  position: relative;
  min-width: 0;
  width: auto;
  height: var(--padding-md);

  display: flex;
}

.site-header__logo {
  position: relative;
  width: auto;
  height: 100%;

  object-fit: contain;
}

.site-header__logo-wrapper {
  position: relative;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: 100%;
}

.site-main {
  padding-top: var(--sizes-header-height);
  flex: 1 0 auto;
}

.hero {
  position: relative;
  height: 50dvh;
  min-height: fit-content;

  display: flex;
  justify-content: center;

  background-size: cover;
  background-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.85)
  );
}

:root {
  --hero-gap: var(--padding-xl);
  --hero-padding: var(--padding-xl);
}

.hero__inner {
  position: relative;
  flex: 1;
  padding: var(--hero-padding);
  padding-top: var(--padding-xxl);
  padding-bottom: var(--padding-xl);

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--hero-gap);
}

.hero__header,
.hero__content-container {
  width: 100%;
  max-width: calc((1000px - (var(--hero-padding) * 2) - var(--hero-gap)) / 2);

  display: flex;
  flex-flow: column;
  gap: var(--padding-md--half);
}

.hero__content-container {
  height: auto;
}

.hero__header {
  padding-left: var(--padding);
}

.hero__logo {
  width: 100%;
  margin-left: calc(-1 * var(--padding));

  object-fit: contain;
}

.hero__content-container {
  gap: var(--padding-md);
}

.hero__subtitle {
  text-wrap: balance;
}

.cards-section {
  display: flex;
  justify-content: center;
}

.cards-section__inner {
  flex: 1;
  padding: var(--padding-lg);
  padding-bottom: var(--padding-xl);
}

.cards-section__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--padding-lg);
}

.cards-section__list li,
.section-card__header hgroup {
  display: contents;
}

.section-card {
  border-radius: var(--border-radius-card);

  display: flex;
  flex-flow: column;

  overflow: hidden;
}

.section-card__featured-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;

  object-fit: cover;
}

.section-card__content-container {
  flex: 1;
  padding: var(--padding-md);

  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: var(--padding-xl);

  background: var(--gradient-pink);
}

.section-card--inactive .section-card__content-container {
  background: var(--gradient-inactive);
}

.section-card__content {
  display: flex;
  flex-flow: column;
  gap: var(--padding-semi);
}

.section-card__header {
  display: flex;
  flex-flow: column;
  gap: var(--padding-xs);
}

.section {
  min-height: var(--sizes-content-height);
  scroll-margin-top: var(--sizes-header-height);
  padding-bottom: var(--padding-xl);
}

.subsection {
  display: flex;
  justify-content: center;
  gap: var(--padding-xl);
}

.subsection .inner-wrapper {
  width: 100%;
  padding: var(--padding-lg);
  padding-bottom: var(--padding-xl);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding-xl);
}

.subsection:not(.subsection-timeline) .subsection__title {
  position: sticky;
  top: var(--sizes-header-height);
  height: fit-content;
}

.subsection__title {
  text-wrap: balance;
  text-wrap: pretty;
}

.subsection-timeline__inner {
  display: flex !important;
  flex-flow: column;
}

.subsection-timeline__events {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--padding-lg);
}

.subsection-timeline__events li,
.event-card__links li {
  display: contents;
}

.event-card {
  position: relative;
  padding: var(--padding-md);
  border-radius: var(--border-radius-card);

  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: var(--padding-xl);

  background-image: var(--gradient-blue);
}

.event-card:not(:nth-child(3n)):not(:last-child)::after {
  position: absolute;
  content: "";
  top: 0;
  left: 100%;
  bottom: 0;
  width: var(--padding-lg);

  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent calc(50% - 2px),
    var(--color-primary) calc(50% - 1px),
    var(--color-primary) calc(50% + 1px),
    transparent calc(50% + 2px)
  );
}

.event-card__content {
  display: flex;
  flex-flow: column;
  gap: var(--padding-semi);
}

.event-card__header {
  display: flex;
  justify-content: space-between;
  gap: var(--padding-semi);
}

.event-card__hgroup {
  display: flex;
  flex-flow: column;
  gap: var(--padding-xs);
}

.event-card__footer {
  display: flex;
  flex-flow: column;
  gap: var(--padding-xs);
}

.event-card__meta,
.event-card__links {
  display: flex;
  flex-flow: row wrap;
  gap: var(--padding-xs);
}

.subsection-text__content {
  display: flex;
  flex-flow: column;
  gap: var(--padding-lg);
}

.list-item {
  display: flex;
  flex-flow: column;
}

.subsection-accordion-list__list,
.subsection-list__list {
  display: flex;
  flex-flow: column;
  gap: var(--padding-lg);
}

.list-item__heading {
  display: flex;
}

.list-item__title {
  color: transparent;
  background-clip: text;
  background-image: var(--gradient-bulletpoint-blue);
}

.list-item__btn {
  flex: 1;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--padding-lg);
}

.list-item__btn-state-container {
  height: var(--gap-line-height-medium);

  display: flex;
  justify-content: center;
  align-items: center;
}

.list-item__btn-state {
  position: relative;
  width: var(--padding);
  height: var(--padding);
  top: calc((var(--gap-line-height-medium) - var(--font-size-medium)) / 2.75);

  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  will-change: transform;

  transition: transform var(--transition-hover);
}

.list-item__btn[aria-expanded="true"] .list-item__btn-state {
  transform: rotate(45deg);
}

:root {
  --btn-state-offset: calc(50% - var(--padding-xxs) / 2);
}

.list-item__btn-state div {
  position: absolute;
  width: 100%;
  height: var(--padding-xxs);
  top: var(--btn-state-offset);
  left: 0;

  background: var(--gradient-bulletpoint-blue);
}

.list-item__btn-state div:last-child {
  height: 100%;
  width: var(--padding-xxs);
  top: 0;
  left: var(--btn-state-offset);
}

.list-item__body-wrapper {
  overflow: hidden;

  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  will-change: height;

  transition: height var(--transition);
}

.list-item__body {
  padding-top: var(--padding-xs);
}

.list-item--accordion .list-item__body-wrapper {
  height: 0;
}

.site-footer {
  display: flex;
  justify-content: center;

  background: var(--gradient-blue);
}

.site-footer__inner {
  flex: 1;
  padding: var(--padding-lg);

  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: var(--padding-xxl);
}

.site-footer__content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding-lg);
}

.site-footer__description {
  padding-right: var(--padding-lg);
}

.site-footer__contact-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding-lg);
}

.site-footer__links,
.site-footer__contact-block {
  display: flex;
  flex-flow: column;
  gap: var(--padding-xs);
}

.site-footer__aside {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding-lg);
}

.site-footer__aside > * {
  align-self: flex-end;
}

.site-footer__logos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-flow: row wrap-reverse;
  align-items: flex-end;
  align-items: center;
  gap: var(--padding-lg);
  row-gap: var(--padding);
}

.site-footer__logos li {
  display: contents;
}

.site-footer__logos a {
  display: flex;
}

.site-footer__logo {
  height: auto;
  max-height: var(--padding-semi-lg);
  width: auto;
  max-width: var(--padding-xxl);

  object-fit: contain;
}

@media screen and (width < 1200px) {
  :root {
    --hero-gap: var(--padding-xxl);
    --hero-padding: var(--padding-lg);
  }

  .event-card__header {
    flex-flow: column;
    gap: var(--padding-semi-sm);
  }

  .event-card__header time {
    order: -1;
  }
}

@media screen and (width < 1000px) {
  :root {
    --hero-gap: var(--padding-xxl);
    --hero-padding: var(--padding-md);
  }

  .inner-wrapper {
    max-width: 550px;
  }

  .site-header__inner {
    padding: var(--padding-md--half) var(--padding-md);
  }

  .site-header__logo-container {
    height: var(--padding-semi);
  }

  .hero {
    height: auto;
    min-height: min(75dvh, 500px);
  }

  .hero__inner {
    flex: 1;
    padding: var(--padding-md);
    padding-left: calc(var(--padding-md) + var(--padding-sm));
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-lg);

    flex-flow: column;
    justify-content: flex-end;
    justify-content: space-between;
    align-items: flex-start;
  }

  .hero__logo {
    padding-bottom: var(--padding-sm);
    margin-left: calc(-1 * var(--padding-sm));
  }

  .hero__header,
  .hero__content-container {
    max-width: unset;
  }

  .hero__header {
    max-width: 300px;
    padding-left: 0;
    gap: var(--padding-sm);
  }

  .section {
    padding-bottom: var(--padding-lg);
  }

  .cards-section__list,
  .subsection-timeline__events {
    display: flex;
    flex-flow: column;
    gap: var(--padding-md);
  }

  .subsection .inner-wrapper,
  .cards-section__inner {
    padding: var(--padding-md);
    padding-bottom: var(--padding-xl);

    display: flex;
    flex-flow: column;
    gap: var(--padding-md);
  }

  .subsection-text__content,
  .subsection-accordion-list__list,
  .subsection-list__list {
    gap: var(--padding-md);
  }

  .event-card:not(:nth-child(3n)):not(:last-child)::after {
    display: none;
  }

  .event-card:not(:last-child)::before {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    height: var(--padding-lg);
    width: 100%;

    background: linear-gradient(
      to right,
      transparent 0%,
      transparent calc(50% - 1px),
      var(--color-primary) calc(50% - 0.5px),
      var(--color-primary) calc(50% + 0.5px),
      transparent calc(50% + 1px)
    );
  }

  .subsection:not(.subsection-timeline) .subsection__title {
    position: relative;
    top: 0;
  }

  .site-footer__inner {
    padding: var(--padding-md);
    padding-bottom: var(--padding-lg);
  }

  .site-footer__content,
  .site-footer__aside {
    display: flex;
    flex-flow: column;
    gap: var(--padding-md);
  }

  .site-footer__contact-container {
    gap: var(--padding-md);
  }

  .site-footer__description {
    padding-right: 0;
  }

  .site-footer__logos {
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: var(--padding);
  }

  .site-footer__logo {
    max-width: var(--padding-xl);
  }

  .site-footer__aside > * {
    align-self: auto;
  }
}