/**
 * @file layout.css
 * @description Layout and navigation styles for Forefront Vision Consulting website.
 *              Contains hero section backgrounds, mobile menu (hamburger/close button),
 *              slide-out navigation panel, dropdown menus, and responsive breakpoints.
 * @project Forefront Vision Consulting
 * @version 2.0
 */

/* ---- Hero Section Background ---- */

.row-bg {
  background-image: url(../images/index.jpg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgb(0, 0, 0);
  min-height: 100vh;
  animation: bgSize 1s ease forwards;
}

@keyframes bgSize {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.row-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.home-header-container .container {
  min-height: 100vh;
}

/* ---- Bottom Gradient & Scroll Indicator ---- */

.bg-bottom {
  background: linear-gradient(to top, #005a9c 13%, transparent 13%);
}

.animate-top-bottom {
  animation: ctaMinimaLArrowOuter 2.5s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

@keyframes ctaMinimaLArrowOuter {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(12px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

/* ---- Hamburger Menu Icon ---- */

.menu-box {
  width: 28px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.menu-inner,
.menu-inner::before,
.menu-inner::after {
  width: 28px;
  height: 3px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.menu-inner {
  display: block;
  width: 20px;
  height: 3px;
  margin-top: 2px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  background-color: #005a9c;
  transition-property: transform;
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.menu-inner::before {
  content: '';
  top: -8px;
  display: block;
  width: 24px;
  height: 3px;
  background-color: #005a9c;
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.menu-inner::after {
  content: '';
  display: block;
  bottom: -8px;
  width: 28px;
  height: 3px;
  background-color: #005a9c;
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* ---- Active Menu Button Gradient ---- */

.main-content.active .header-container .menu-btn {
  background: linear-gradient(45deg, #262b6f, #5893b0) !important;
}

.main-content.active .header-container .menu-btn .menu-inner,
.main-content.active .header-container .menu-btn .menu-inner::after,
.main-content.active .header-container .menu-btn .menu-inner::before {
  background-color: #fff !important;
}

/* ---- Close Button ---- */

.menu-close-btn {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 99;
}

.menu-close-box:hover {
  transform: scale(1.1);
}

.close-wrap {
  -webkit-font-smoothing: subpixel-antialiased;
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  transition: margin 0.2s ease, transform 0.2s ease 1s, opacity 0.3s ease;
  width: 20px;
  height: 20px;
  display: block;
  overflow: hidden;
}

.close-wrap .close-line {
  position: absolute;
  left: 9px;
  width: 2px;
  height: 100%;
  background: #fff;
  border-radius: 5px;
  backface-visibility: hidden;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1);
  animation-fill-mode: forwards;
}

.close-line.close-line1 {
  background: linear-gradient(180deg, #262b6f, #5893b0) !important;
  animation-name: crossRight;
  animation-delay: 0.29s;
}

.close-line.close-line2 {
  background: linear-gradient(0deg, #262b6f, #5893b0) !important;
  animation-name: crossLeft;
  animation-delay: 0.15s;
}

.menu-close-btn.active .close-line1 {
  transform: translateY(-30px) translateX(30px) rotate(45deg);
}

.menu-close-btn.active .close-line2 {
  transform: translateY(-30px) translateX(-30px) rotate(-45deg);
}

@keyframes crossRight {
  100% {
    transform: translateY(0) translateX(0) rotate(45deg);
  }
}

@keyframes crossLeft {
  100% {
    transform: translateY(0) translateX(0) rotate(-45deg);
  }
}

/* ---- Slide-Out Navigation Panel ---- */

#slide-area {
  transform: translateX(0);
  box-sizing: border-box;
  left: 100%;
}

#slide-area ul li a.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  left: 0;
  bottom: 0;
}

#slide-area.active {
  transform: translateX(-100%);
}

/* ---- Dropdown Menus & Icons ---- */

.icon-btn.active {
  transform: rotate(180deg);
}

.down-menu.active {
  height: 84px;
}

.h-leading {
  line-height: 1.4 !important;
}

/* ---- Responsive Breakpoints ---- */

@media (min-width: 1024px) {
  #slide-area {
    min-width: 33.3vw;
    padding-left: 4%;
    padding-right: 4%;
  }

  .main-content.active {
    transform: scale(0.8) translateX(-32vw) translateZ(0) !important;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  #slide-area {
    min-width: 360px;
    padding-left: 60px;
    padding-right: 60px;
  }

  .main-content.active {
    transform: scale(0.835) translateX(-466px) translateZ(0) !important;
  }
}

@media (max-width: 768px) {
  #slide-area {
    min-width: 200px;
    width: 75%;
    padding-left: 30px;
    padding-right: 30px;
  }

  .main-content.active {
    transform: scale(0.84) translateX(-93%) translateZ(0) !important;
  }
}