@charset "utf-8";

/* =========================
   Page Header
   ========================= */
.page-header {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(400rem, calc(500 / var(--container) * 100vw), 500rem);
  color: #fff;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--black) no-repeat center / cover;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    color: #fff;
    background: url("/assets/images/layouts/bg-maintence.jpg");
    pointer-events: none;
  }
  .page-header-container {
    display: grid;
  }
  .heading {
    font: var(--font-size-50) var(--font-sans);
  }

  @media (prefers-reduced-motion: no-preference) {
    &::before {
      animation: page-header-bg 1.8s both;
    }
    .heading {
      animation: slide-up 0.6s 0.2s both;
      opacity: 0;
    }
  }
}

@keyframes page-header-bg {
  0% {
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}
@keyframes slide-up {
  0% {
    translate: 0 40rem;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}
@keyframes slide-right {
  0% {
    translate: -40rem;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}

/* =========================
   Local Nav
   ========================= */
.local-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 7;
  font: var(--font-size-18-to-14) var(--font-sans);
  background-color: rgba(255, 255, 255, 0.2);

  .container {
    display: flex;
    height: 3.88888889em;
  }
  .home {
    display: grid;
    place-items: center;
    height: 100%;
    aspect-ratio: 1;
    background: var(--primary);
  }
  .home-icon {
    display: block;
    width: 1.05555556em;
    height: auto;
    fill: #fff;
  }

  details {
    position: relative;
  }
  summary {
    font-size: clamp(14rem, calc(18 / var(--container) * 100vw), 18rem);
    font-weight: 400;
    position: relative;
    display: block;
    align-content: center;
    height: 100%;
    padding-inline: 1.66666667em 3.83333333em;
    background: #fff;
    color: var(--black);
    text-align: left;
    min-width: 155rem;
  }
  .details-level-2 summary {
    min-width: 155rem;
    font-weight: 700;
  }

  summary::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto 29rem auto auto;
    width: 0.55555556em;
    aspect-ratio: 1;
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    rotate: 45deg;
    translate: 0 -25%;
  }
  [open] summary::after {
    scale: -1;
    translate: 0 25%;
  }

  .nav-menu {
    position: absolute;
    inset: 100% 0 auto;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 10rem 30rem #0000000d;
    color: var(--black);
  }
  .details-level-1 .nav-menu-level-2,
  .details-level-2 .nav-menu-level-3 {
    display: none;
  }

  .nav-link {
    display: block;
    padding: 0.7em 1.61111111em;
  }
  @media (any-hover) {
    .nav-link:hover {
      background: #f4f4f4;
    }
  }
}

.back-cta {
  display: inline-flex;
  padding: 12px 16px;
  color: #fff;
  background-color: #ff8605;
  border-radius: 12px;
  margin-top: 32px;
  gap: 8px;
}
.img-under img {
  max-width: 100%;
}
.page-header-center {
  position: absolute;
  inset: 0;
  z-index: 99;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: 20rem;
  pointer-events: none;
}

.page-header-title {
  margin: 0;
  font: 800 clamp(28rem, calc(40 / var(--container) * 100vw), 40rem)
    var(--font-sans);
  color: #fff;
}