/*
  Phase 8K: Hero + header stabilization patch.

  Purpose:
  - Complete Phase 2 of the responsive cleanup plan.
  - Make the header breakpoint contract consistent from phone through tablet.
  - Keep the homepage hero visually strong while reducing oversized mobile height.
  - Preserve the current desktop design and avoid editing the legacy template CSS.

  Load order:
  - This file must load after phase8j-mobile-stabilization.css.
*/

:root {
  --phase8k-header-height-desktop: 92px;
  --phase8k-header-height-tablet: 78px;
  --phase8k-header-height-phone: 70px;
  --phase8k-hero-desktop: clamp(700px, 78svh, 800px);
  --phase8k-hero-tablet: clamp(580px, 72svh, 680px);
  --phase8k-hero-phone: clamp(500px, 76svh, 590px);
  --phase8k-hero-narrow: clamp(480px, 78svh, 540px);
}

/* Fallback for browsers without svh support. */
@supports not (height: 100svh) {
  :root {
    --phase8k-hero-desktop: clamp(700px, 78vh, 800px);
    --phase8k-hero-tablet: clamp(580px, 72vh, 680px);
    --phase8k-hero-phone: clamp(500px, 76vh, 590px);
    --phase8k-hero-narrow: clamp(480px, 78vh, 540px);
  }
}

/* --------------------------------------------------------------------------
   Header contract
   -------------------------------------------------------------------------- */

.header-area,
.header-style-two,
#header-sticky {
  z-index: 999;
}

.header-style-two .header-main {
  min-height: var(--phase8k-header-height-desktop);
  display: flex;
  align-items: center;
}

.header-style-two .header-left,
.header-style-two .header-right {
  min-width: 0;
}

.header-style-two .header-logo a,
.header-style-two .header-logo img {
  display: block;
}

.header-style-two .header-logo img {
  width: clamp(146px, 12vw, 170px);
  height: auto;
}

.header-style-two .main-menu ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.header-style-two .main-menu ul li a {
  white-space: nowrap;
}

.header-style-two .header-right {
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.header-style-two .header-action {
  flex: 0 0 auto;
}

.header-style-two .header-link-1 {
  align-items: center;
}

.header-style-two .sidebar-toggle-button,
.header-style-two .bar-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header-style-two .sidebar-toggle-button i,
.header-style-two .bar-icon i {
  font-size: 24px;
}

/* Avoid the awkward 992px-1199px range where the desktop nav crowds the header. */
@media (max-width: 1199.98px) {
  .header-style-two .header-main {
    min-height: var(--phase8k-header-height-tablet);
  }

  .header-style-two .mean__menu-wrapper {
    display: none !important;
  }

  .header-style-two .header__hamburger.d-xl-none {
    display: flex !important;
    align-items: center;
  }
}

@media (max-width: 991.98px) {
  .header-style-two .header-action {
    display: none !important;
  }

  .header-style-two .header-main {
    gap: 14px;
  }
}

@media (max-width: 767.98px) {
  .header-style-two .header-main {
    min-height: var(--phase8k-header-height-phone);
  }

  .header-style-two .header-logo img {
    width: min(148px, 48vw);
  }

  .header-style-two .sidebar-toggle-button,
  .header-style-two .bar-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }
}

@media (max-width: 374.98px) {
  .header-style-two .header-logo img {
    width: min(136px, 46vw);
  }

  .header-style-two .sidebar-toggle-button,
  .header-style-two .bar-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Offcanvas navigation stability
   -------------------------------------------------------------------------- */

.offcanvas__info {
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100dvh;
}

@supports not (height: 100dvh) {
  .offcanvas__info {
    height: 100vh;
  }
}

.offcanvas__wrapper {
  padding-top: max(28px, env(safe-area-inset-top));
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.mobile-menu,
.mobile-menu .mean-container,
.mobile-menu .mean-bar,
.mobile-menu .mean-nav {
  width: 100%;
}

.mobile-menu .mean-bar {
  background: transparent;
  min-height: 0;
  padding: 0;
}

.mobile-menu .mean-nav {
  background: transparent;
  margin-top: 0;
}

.mobile-menu .mean-nav ul li a,
.mobile-menu .phase8k-mobile-nav a {
  min-height: 48px;
  display: flex;
  align-items: center;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 16px;
  line-height: 1.3;
}

.mobile-menu .phase8k-mobile-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu .phase8k-mobile-nav a {
  padding: 14px 0;
  justify-content: space-between;
  text-decoration: none;
}

.mobile-menu .phase8k-mobile-nav a::after {
  content: '\2192';
  font-size: 18px;
  opacity: 0.72;
}

.mobile-menu .phase8k-mobile-nav a:hover,
.mobile-menu .phase8k-mobile-nav a:focus-visible {
  color: var(--theme-color);
}

@media (max-width: 767.98px) {
  .offcanvas__info {
    width: 100vw;
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Homepage hero stabilization
   -------------------------------------------------------------------------- */

.banner-section-2,
.banner-section-2 .banner-active,
.banner-section-2 .swiper-wrapper,
.banner-section-2 .swiper-slide,
.banner-section-2 .banner-main-2 {
  min-height: var(--phase8k-hero-desktop);
}

.banner-section-2 .banner-main-2 {
  align-items: center;
  background-position: center center !important;
  background-size: cover !important;
}

.banner-section-2 .banner-main-2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 11, 23, 0.78) 0%, rgba(5, 11, 23, 0.58) 42%, rgba(5, 11, 23, 0.16) 100%);
}

.banner-section-2 .banner-main-2 > .large-container {
  min-height: inherit;
  display: flex;
  align-items: center;
}

.banner-section-2 .banner-area-2 {
  width: min(760px, 100%);
  padding-top: 72px;
  padding-bottom: 72px;
}

.banner-section-2 .banner-sub-title {
  display: inline-block;
  margin-bottom: 16px;
}

.banner-section-2 .banner-title,
.banner-section-2 h1.banner-title,
.banner-section-2 h2.banner-title {
  max-width: 10.8em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.banner-section-2 .banner-text,
.banner-section-2 p.banner-text {
  max-width: 620px;
  margin-bottom: 0;
  padding-bottom: 34px;
}

.banner-section-2 .banner-btn-area-2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.banner-section-2 .primary-btn-1 {
  min-height: 52px;
}

.banner-section-2 .socials-area {
  z-index: 4;
}

.banner-section-2 .banner-dot-inner {
  z-index: 5;
}

@media (max-width: 1199.98px) {
  .banner-section-2,
  .banner-section-2 .banner-active,
  .banner-section-2 .swiper-wrapper,
  .banner-section-2 .swiper-slide,
  .banner-section-2 .banner-main-2 {
    min-height: var(--phase8k-hero-tablet);
  }

  .banner-section-2 .banner-area-2 {
    width: min(700px, 100%);
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .banner-section-2 .banner-title,
  .banner-section-2 h1.banner-title,
  .banner-section-2 h2.banner-title {
    font-size: clamp(42px, 6vw, 58px);
    line-height: 1.08;
  }

  .banner-section-2 .socials-area {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .banner-section-2,
  .banner-section-2 .banner-active,
  .banner-section-2 .swiper-wrapper,
  .banner-section-2 .swiper-slide,
  .banner-section-2 .banner-main-2 {
    min-height: var(--phase8k-hero-phone);
  }

  .banner-section-2 .banner-main-2::before {
    background: linear-gradient(90deg, rgba(5, 11, 23, 0.86) 0%, rgba(5, 11, 23, 0.68) 62%, rgba(5, 11, 23, 0.28) 100%);
  }

  .banner-section-2 .banner-main-2 > .large-container {
    min-height: inherit;
    align-items: center;
  }

  .banner-section-2 .banner-area-2 {
    width: 100%;
    padding-top: 42px;
    padding-bottom: 58px;
  }

  .banner-section-2 .banner-sub-title {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0.08em;
  }

  .banner-section-2 .banner-title,
  .banner-section-2 h1.banner-title,
  .banner-section-2 h2.banner-title {
    max-width: 11em;
    margin-bottom: 14px;
    font-size: clamp(32px, 9.6vw, 44px);
    line-height: 1.09;
  }

  .banner-section-2 .banner-text,
  .banner-section-2 p.banner-text {
    max-width: 34rem;
    padding-right: 0;
    padding-bottom: 26px;
    font-size: 16px;
    line-height: 1.55;
  }

  .banner-section-2 .banner-btn-area-2 {
    align-items: stretch;
    max-width: 318px;
  }

  .banner-section-2 .primary-btn-1 {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .banner-section-2 .shape-area-2 {
    opacity: 0.28;
  }

  .banner-section-2 .banner-dot-inner {
    bottom: 18px;
  }
}

@media (max-width: 374.98px) {
  .banner-section-2,
  .banner-section-2 .banner-active,
  .banner-section-2 .swiper-wrapper,
  .banner-section-2 .swiper-slide,
  .banner-section-2 .banner-main-2 {
    min-height: var(--phase8k-hero-narrow);
  }

  .banner-section-2 .banner-area-2 {
    padding-top: 34px;
    padding-bottom: 54px;
  }

  .banner-section-2 .banner-title,
  .banner-section-2 h1.banner-title,
  .banner-section-2 h2.banner-title {
    font-size: 31px;
  }

  .banner-section-2 .banner-text,
  .banner-section-2 p.banner-text {
    font-size: 15px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-section-2 .swiper-slide,
  .banner-section-2 .banner-area-2,
  .banner-section-2 .shape-area-2 {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}