/*
  Theme Name: EFC TaunusChaoten 2.0
  Author: Daniel Cunningham
  Text Domain: efc
*/

:root {
  --primary-color: rgb(203, 0, 0);
  --secondary-color: rgb(34, 34, 34);
  --dark-secondary-color: rgb(21, 21, 21);
  --light-color: rgb(153, 153, 153);
  --muted-color: rgb(63, 63, 63);
  --white-color: rgb(255, 255, 255);

  --trans-duration: 300ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  overflow-x: hidden;
}

body {
  font-size: 1.6rem;
  font-weight: 400;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  color: var(--white-color);
  background: var(--secondary-color);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  text-decoration: none;
  color: var(--light-color);
  transition: all var(--trans-duration);
  font-weight: 600;

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

p {
  word-spacing: 0.3rem;
  line-height: 1.7;
  margin: 0 0 2rem 0;

  &:last-child {
    margin: 0;
  }
}

.container {
  width: 95%;
  max-width: 900px;
  margin-inline: auto;
}

.pageContent {
  padding: 10rem 0;
}

header {
  background: linear-gradient(
    to top left,
    var(--secondary-color),
    var(--primary-color)
  );
  padding: 50px 0;
  z-index: 3;
  position: relative;
}

.mainMenu {
  display: none;
  background: rgb(30, 30, 30);
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 2;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;

    li {
      display: block;

      a {
        display: block;
        padding: 20px 40px;
        color: var(--light-color);
        position: relative;
        overflow: hidden;

        &::after {
          content: attr(data-name);
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          translate: -50% 150%;
          transition: var(--trans-duration);
        }

        &:hover {
          color: transparent;
          background: var(--primary-color);

          &::after {
            translate: -50% -50%;
            color: var(--white-color);
            scale: 1.3;
          }
        }
      }
    }
  }

  @media (width >= 1024px) {
    display: flex;
  }
}

.menuIcon {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 35px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: pointer;

  span {
    width: 100%;
    height: 3px;
    background: var(--white-color);
    opacity: 0.5;
    transition: var(--trans-duration);

    &:nth-child(1) {
      translate: 0 -8px;
    }
    &:nth-child(3) {
      translate: 0 8px;
    }
  }

  &:hover {
    span {
      opacity: 1;
    }
  }

  &.open {
    span {
      &:nth-child(1) {
        translate: 0 3px;
        rotate: -45deg;
      }

      &:nth-child(2) {
        scale: 1 0;
      }

      &:nth-child(3) {
        translate: 0 -3px;
        rotate: 45deg;
      }
    }
  }

  @media (width >= 1024px) {
    display: none;
  }
}

.menuOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  top: -100%;
  scale: 0;
  transition: all 150ms;

  &.open {
    opacity: 1;
    top: 0;
    scale: 1;
  }
}

.mobileMenu {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    li {
      display: block;

      a {
        display: block;
        font-size: 3rem;
        text-transform: uppercase;
        color: var(--white-color);
        position: relative;
        font-weight: 900;
        transition: var(--trans-duration);
        transition-duration: 100ms;
        line-height: 1;

        &::before {
          content: attr(data-name);
          display: block;
          position: absolute;
          top: 100%;
          left: 50%;
          translate: -50% -50%;
          width: 100%;
          font-size: 2rem;
          color: var(--white-color);
          opacity: 0;
          scale: 0;
          transition: var(--trans-duration);
          /* transition-duration: 100ms; */
        }

        &:hover {
          color: var(--primary-color);

          &::before {
            opacity: 1;
            translate: -50% -50%;
            top: 50%;
            scale: 1;
          }
        }
      }
    }
  }
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  background: transparent;
  border: 0.2rem solid transparent;
  border-radius: 0.5rem;

  &.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);

    &:hover {
      background: var(--white-color);
      border-color: var(--white-color);
      color: var(--secondary-color);
    }
  }
}

.homeAboutContent {
  background: linear-gradient(
    to bottom right,
    var(--muted-color),
    var(--secondary-color),
    var(--muted-color)
  );
  border: 0.2rem solid var(--light-color);
  padding: 2rem;
}

.welcomeSection {
  padding: 10rem 0;
  background: linear-gradient(var(--muted-color), var(--secondary-color));
  h1 {
    span {
      color: var(--white-color);
    }
  }

  h3 {
    span {
      color: var(--primary-color);
    }
  }
}

.aboutSection {
  padding: 10rem 0;
}

.eventSection {
  background: var(--primary-color);
  padding: 10rem 0;
}

.membershipSection {
  padding: 10rem 0;
}

footer {
  background: var(--dark-secondary-color);
  border-top: 0.2rem solid var(--muted-color);
  padding: 5rem 0;

  .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: center;

    .copyright {
      font-size: 1.3rem;
      font-style: italic;
    }

    .footerMenu {
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 2rem;
      }
    }

    @media (width < 768px) {
      justify-content: center;
    }
  }
}