/* Table of contents

  1. Header
  2. Navigation - to do: sort stuff
  2.1 Changes for mobile menu - to do: sort stuff
  3, Burger Icon
  4. Media queries
  4.1 min-width 575px
  4.2 min-width 768px
  4.3 min-width 992px
  4.4 min-width 1200px

*/

/* 1. Header */
.theme-header {
  background-color: var(--clr-white);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 10px;
  box-shadow: var(--shadow-1);
  z-index: 4;
}

.theme-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a.theme-logo-container {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
}

a.theme-logo-container > span:first-child {
  font-family: "Roboto Slab", sans-serif;
  color: var(--clr-primary);
}

.theme-header.active a.theme-logo-container > span:last-child,
a.theme-logo-container > span:last-child {
  font-family: "Roboto", sans-serif;
  color: var(--clr-black);
  top: -4px;
  position: relative;
}

/* 2. Navigation */
.theme-nav-container {
  display: flex;
  align-content: center;
  align-items: stretch;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1440px;
  max-width: var(--max-width-super);
  width: 100%;
  position: relative;
  z-index: 1;
}

.theme-nav {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  visibility: hidden;
  transition: 0.25s var(--cubic-in);
}

.theme-nav.active {
  visibility: visible;
  transform: translateY(-100%);
  transition: 0.5s var(--cubic-out);
}

#btn-login {
  position: absolute;
  right: 90px;
  padding: 15px;
}

#btn-login.active {
  background-color: var(--clr-black_20);
}

.theme-nav-site-links,
.theme-nav-special-links {
  align-items: stretch;
  display: flex;
}

.theme-nav-site-links {
  opacity: 0;
  flex-direction: column;
}

.theme-nav-site-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 48px;
  padding: 48px var(--spacer-medium) var(--spacer-large);
  pointer-events: none;
}

.theme-nav-link {
  color: var(--clr-white);
  display: block;
  font-size: var(--fs-4);
  font-weight: 500;
  text-align: center;
  padding-block: 10px;
  margin-block-end: 20px;
  transition: var(--transition-1);
}
#link-logout .theme-nav-link {
  color: var(--clr-black);
  margin-block-end: 0px;
}

.theme-nav-link:hover,
.theme-nav-link:focus,
.theme-nav-link.selected {
  color: var(--clr-secondary);
}

/* 2.1 Changes for mobile menu  */

.theme-nav-site-links.mobile {
  background-color: rgba(255, 255, 255, 0.75);
  opacity: 1;
  pointer-events: auto;
  transition: all var(--transition-duration-medium) ease;
  border-bottom: 2px solid #191919;
  border-bottom: 2px solid var(--clr-black);
}

.theme-nav-site-links.mobile .theme-nav-link {
  border: 1px solid #666666;
  border: 1px solid var(--clr-medium-grey);
  border-radius: 4px;
  padding: 16px;
  padding: var(--spacer-medium);
  background-color: white;
  width: 100%;
}

.theme-nav-site-links.mobile .theme-nav-link.selected {
  background-color: #e5e5e5;
  background-color: var(--clr-lighter-grey);
}

.theme-nav-site-links.mobile > * {
  margin: 8px 0;
  margin: var(--spacer-vertical-small);
}

.theme-nav-site-links.mobile > *:first-child {
  margin-top: 0;
}

.theme-nav-site-links.mobile > *:last-child {
  margin-bottom: 0;
}

/* 3. Burger Icon */

.theme-nav-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background-color: var(--clr-secondary);
  color: var(--clr-white);
  font-size: 40px;
  padding: 10px;
  border-radius: var(--radius-8);
}

.theme-nav-burger {
  display: flex;
  align-items: center;
  z-index: 2;
}

button.theme-nav-burger--button {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  font-family: inherit;
  border: none;
  background-color: var(--clr-primary);
  padding: 15px 15px;
  border-radius: var(--radius-8);
}

button.theme-nav-burger--button.active {
  background-color: var(--clr-black_20);
}

.theme-nav--burger-svg {
  transition: transform 250ms ease;
  transition: transform var(--transition-duration-medium) ease;
}

.theme-nav--burger-svg > path {
  transition: transform 250ms ease, opacity 250ms ease;
  transition: transform var(--transition-duration-medium) ease,
    opacity var(--transition-duration-medium) ease;
}

.theme-nav--burger-svg > path:nth-child(1) {
  transform-origin: 4px 6px;
}
.theme-nav--burger-svg > path:nth-child(2) {
  opacity: 1;
}
.theme-nav--burger-svg > path:nth-child(3) {
  transform-origin: 3px 18px;
}

button.theme-nav-burger--button.active > .theme-nav--burger-svg {
  transition: transform 250ms ease;
  transition: transform var(--transition-duration-medium) ease;
  transform: translateX(3px);
}

button.theme-nav-burger--button.active
  > .theme-nav--burger-svg
  > path:nth-child(1) {
  transform: rotate(45deg);
}

button.theme-nav-burger--button.active
  > .theme-nav--burger-svg
  > path:nth-child(2) {
  opacity: 0;
}

button.theme-nav-burger--button.active
  > .theme-nav--burger-svg
  > path:nth-child(3) {
  transform: rotate(-45deg);
}

/* 4. Media queries */

/* 4.1 min-width: 575px */

@media (min-width: 575px) {
  .rog-content,
  .theme-header-container {
    max-width: var(--max-width-small);
    width: 100%;
    margin-inline: auto;
  }

  .theme-header .theme-header-container {
    max-width: unset;
    padding-inline: 30px;
  }

  a.theme-logo-container {
    font-size: 3.5rem;
  }
}

/* 4.2 min-width: 768px */

@media (min-width: 768px) {
  .theme-header-container,
  .rog-content {
    max-width: var(--max-width-medium);
  }

  .theme-nav-site-links {
    opacity: 1;
    flex-direction: row;
    position: static;
    top: auto;
    left: auto;
    width: auto;
    padding: 0;
    background-color: transparent;
    pointer-events: auto;
  }

  .theme-nav-site-links.mobile {
    background-color: transparent;
    border-bottom: none;
  }

  .theme-nav-site-links.mobile > span {
    margin: 0;
  }

  .theme-nav-site-links.mobile .theme-nav-link {
    background-color: transparent;
    border: none;
    padding: 0px 24px;
    padding: 0px var(--spacer-large);
  }

  .theme-nav-site-links.mobile .theme-nav-link.selected {
    background-color: rgba(255, 255, 255, 0.4);
  }
}

/* 4.3 min-width: 992px */

@media (min-width: 992px) {
  .rog-content,
  .theme-header .theme-header-container {
    max-width: var(--max-width-large);
  }

  .theme-header {
    background-color: var(--clr-black_20);
    box-shadow: none;
    padding-block: 30px;
    transition: var(--transition-1);
  }

  .theme-header.active {
    transform: translateY(-100%);
    background-color: var(--clr-white);
    padding-block: 20px;
    box-shadow: var(--shadow-1);
    animation: slideIn 0.5s ease forwards;
  }

  a.theme-logo-container > span:last-child {
    color: var(--clr-white);
  }

  #btn-login {
    display: block;
    position: static;
    padding: 15px 35px;
  }

  .rog-button-secondary {
    background-color: var(--clr-white);
    color: var(--clr-primary);
  }

  .theme-header.active .rog-button {
    background-color: var(--clr-primary);
    color: var(--clr-white);
  }

  .theme-header.active .rog-button:hover {
    background-color: var(--clr-secondary);
  }

  .theme-header-container {
    gap: 30px;
  }

  .theme-nav,
  .theme-nav.active {
    all: unset;
    margin-inline-start: auto;
  }

  .theme-nav-list {
    display: flex;
    gap: 10px;
  }

  .theme-nav-burger {
    display: none;
  }

  .theme-nav-link {
    color: var(--clr-white);
    font-size: unset;
    padding: 0 10px;
    margin-block-end: 0;
  }

  .theme-header.active .theme-nav-link {
    color: var(--clr-secondary);
  }

  .theme-nav-link:hover,
  .theme-nav-link:focus,
  .theme-nav-link.selected {
    color: var(--clr-primary) !important;
  }
  #link-logout .theme-nav-link {
    color: var(--clr-white);
  }
}

/* 4.4 min-width: 1200px */

@media (min-width: 1200px) {
  .rog-content,
  .theme-header .theme-header-container {
    max-width: var(--max-width-super);
  }

  .theme-header .theme-header-container {
    padding-inline: 0px;
  }

  .rog-button {
    padding: 18px 45px;
    border-radius: var(--radius-10);
  }
}