/* ===== Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background: #f3efe7;
  color: #101a17;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: #16453a;
  text-decoration: none;
}
a:hover {
  color: #c79a4e;
}
img {
  display: block;
  max-width: 100%;
}

/* Demo only: on the real site the header sits on top of the hero photo */
.page-demo {
  min-height: 100vh;
  background: #16453a;
}

/* ===== Header ===== */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgba(243, 239, 231, 0.14);
}

.header__logo {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  justify-self: start;
  width: max-content;
}

.header__logo-img {
  display: block;
  width: auto;
  height: clamp(30px, 3vw, 38px);
}

.header__tagline {
  padding-left: 2px;
  font:
    400 11px/1 Inter,
    sans-serif;
  color: rgba(243, 239, 231, 0.78);
  white-space: nowrap;
}

.header__nav {
  grid-column: 2;
  display: none;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}

.header__nav-link {
  font:
    500 14px/1 Inter,
    sans-serif;
  color: #f3efe7;
}

.header__nav-link:hover {
  color: #c79a4e;
}

.header__actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.header__whatsapp {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(243, 239, 231, 0.45);
  border-radius: 0;
  font:
    500 14px/1 Inter,
    sans-serif;
  color: #f3efe7;
  transition:
    background 0.22s,
    border-color 0.22s;
}

.header__whatsapp:hover {
  background: rgba(243, 239, 231, 0.1);
  border-color: #f3efe7;
  color: #f3efe7;
}

.header__whatsapp-label {
  display: none;
}

.header__pay {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  color: #f3efe7;
}

.header__pay-text {
  font:
    500 14px/1 Inter,
    sans-serif;
  white-space: nowrap;
}

.header__buy {
  position: relative;
  overflow: hidden;
  display: none;
  align-items: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 0;
  background: #c79a4e;
  font:
    600 14px/1 "Plus Jakarta Sans",
    sans-serif;
  color: #101a17;
  transition: background 0.22s;
}

.header__buy:hover {
  background: #f3efe7;
  color: #16453a;
}

.header__buy:active {
  transform: scale(0.985);
}

.header__buy-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-150%) skewX(-20deg);
  animation: header-shine 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

.header__buy-text {
  position: relative;
}

@keyframes header-shine {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  30%,
  100% {
    transform: translateX(350%) skewX(-20deg);
  }
}

.header__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(243, 239, 231, 0.45);
  border-radius: 0;
  background: transparent;
  color: #f3efe7;
  cursor: pointer;
}

.header__burger:hover {
  background: rgba(243, 239, 231, 0.1);
  border-color: #f3efe7;
}

.header__burger-icon--close {
  display: none;
}

.header__menu {
  display: none;
  flex-direction: column;
  padding: 8px clamp(20px, 4vw, 56px) 24px;
  background: #16453a;
  border-bottom: 1px solid rgba(243, 239, 231, 0.14);
}

.header__menu-link {
  padding: 18px 0;
  border-bottom: 1px solid rgba(243, 239, 231, 0.14);
  font:
    600 18px/1.2 "Plus Jakarta Sans",
    sans-serif;
  color: #f3efe7;
}

.header__menu-link:hover {
  color: #c79a4e;
}

.header__menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 24px;
  background: #f3efe7;
  font:
    600 15px/1 "Plus Jakarta Sans",
    sans-serif;
  color: #16453a;
}

.header__menu-button:hover {
  background: #c79a4e;
  color: #101a17;
}

/* Menu open state */
.header--menu-open .header__menu {
  display: flex;
}
.header--menu-open .header__burger-icon--open {
  display: none;
}
.header--menu-open .header__burger-icon--close {
  display: block;
}

/* ===== Responsive ===== */
@media (min-width: 560px) {
  .header__buy {
    display: flex;
  }
}

@media (min-width: 980px) {
  .header__nav {
    display: flex;
  }
  .header__whatsapp-label {
    display: inline;
  }
  .header__burger {
    display: none;
  }
  .header__menu,
  .header--menu-open .header__menu {
    display: none;
  }
}

@media (min-width: 1100px) {
  .header__pay {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header__buy-shine {
    animation: none;
  }
}