/* ==========================================================================
   Header Rules
   ========================================================================== */
.site-header {
  padding: 1.625rem 0 1.3125rem 0; /* 26px 0 21px 0 */
  background: var(--enaya-white);
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05); /* 0px 4px 20px */
  position: relative;
  z-index: 100;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Sticky Header Styles */
.site-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(0);
  box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.1); /* 0px 4px 30px */
  animation: slideDown 0.3s ease forwards;
  padding: 0.71875rem 0 0.71875rem 0; /* 11.5px 0 11.5px 0 */
  background: #ffffff;
}

/* Sticky Header - Logo adjustments */
.site-header.is-sticky .header-logo-1 {
  width: 4.46125rem; /* 71.38px */
  height: auto;
}

.site-header.is-sticky .header-logo-2 {
  width: 9.375rem; /* 150px */
  height: auto;
}

.site-header.is-sticky .header-logos {
  gap: 1.34875rem; /* 21.58px */
}

.site-header.is-sticky .logo-divider {
  height: 1.815625rem; /* 29.05px */
}

/* Sticky Header - Navigation adjustments */
.site-header.is-sticky .header-nav ul {
  gap: 2.875rem; /* 46px */
}

.site-header.is-sticky .btn {
  padding-top: 0.65625rem; /* 10.5px */
  padding-bottom: 0.65625rem; /* 10.5px */
}
.site-header.is-sticky .header-nav a {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.375rem; /* 22px */
  color: #000000;
}

/* Header hidden state when scrolling but hero not passed */
.site-header.is-hidden {
  transform: translateY(-100%);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Placeholder to prevent content jump when header becomes fixed */
.header-placeholder {
  display: none;
}

.header-placeholder.is-active {
  display: block;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0.5rem; /* 8px */
}

.header-logos {
  display: flex;
  align-items: center;
  gap: 1.678125rem; /* 26.85px */
}

.header-logos a {
  line-height: 0;
}

.header-logo-1 {
  width: 5.375rem; /* 86px */
  height: auto;
}

.header-logo-2 {
  width: 12.524rem; /* 86px */
  height: auto;
}

.logo-divider {
  display: block;
  width: 1px;
  height: 2.1875rem; /* 35px */
  background-color: #acacab;
  transform: rotate(0deg);
}

.header-logo-2-body {
  margin-left: auto; /* Pushes Nav and Actions to the right */
  margin-right: 1.875rem; /* 30px */
}

.header-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2.875rem; /* 46px */
}

.header-nav {
  margin-right: 0.969rem;
}

.header-nav a {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.375rem; /* 22px */
  color: var(--enaya-black);
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
}

.lang-switch {
  font-family: "Avenir Next LT Pro", "Dubai", sans-serif;
  font-size: 1.125rem; /* 18px */
  color: var(--enaya-black);
  text-decoration: none;
  margin-right: 1.13375rem; /* 18.14px */
}

.search-icon {
  margin-right: 1.21875rem; /* 19.5px */
}

.search-icon img {
  width: 1.25rem; /* 20px */
  height: auto;
}

.header-toll-free {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  margin-right: 1.25rem; /* 20px */
}

.header-toll-free img {
  width: 2.225625rem; /* 35.61px */
  height: 2.225625rem; /* 35.61px */
}

.header-toll-free div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.header-toll-free span:first-child {
  font-family: "Dubai", sans-serif;
  font-weight: 400;
  font-size: 0.75rem; /* 12px */
  line-height: 1.25rem; /* 20px */
  color: #000000;
}

.header-toll-free span:last-child {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.375rem; /* 22px */
  color: #000000;
}

.header-nav a.current_page_item {
  color: #0e838e;
}
/* ==========================================================================
   Responsive Header Styles
   ========================================================================== */

/* Hamburger Menu Button */
.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 1001;
}

.hamburger-menu span {
  display: block;
  width: 1.5rem; /* 24px */
  height: 0.125rem; /* 2px */
  background-color: var(--enaya-black);
  margin: 0.1875rem 0; /* 3px 0 */
  transition: all 0.3s ease;
  border-radius: 0.125rem; /* 2px */
}

/* Hamburger active state (X) */
.hamburger-menu.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(0.3125rem, 0.3125rem); /* 5px, 5px */
}

.hamburger-menu.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(0.3125rem, -0.3125rem); /* 5px, -5px */
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mobile-nav-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Navigation Menu */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: -60%;
  width: 60%;
  height: 100vh;
  background: #ffffff;
  z-index: 1000;
  padding: 5rem 1.875rem 1.875rem; /* 80px 30px 30px */
  box-shadow: -0.3125rem 0 1.25rem rgba(0, 0, 0, 0.1); /* -5px 0 20px */
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-nav.is-active {
  right: 0;
}

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

.mobile-nav li {
  margin-bottom: 1.25rem; /* 20px */
}

.mobile-nav a {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.375rem; /* 22px */
  color: var(--enaya-black);
  text-decoration: none;
  display: block;
  padding: 0.625rem 0; /* 10px 0 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: color 0.3s ease;
}

.mobile-nav a:hover {
  color: #00818d;
}

.mobile-nav .btn-enrollment {
  margin-top: 1.875rem; /* 30px */
  width: 100%;
  text-align: center;
}

/* Medium Desktop - Reduced nav spacing (max-width: 1400px) */
@media (max-width: 1400px) and (min-width: 1201px) {
  .header-logo-1 {
    width: 4rem; /* 64px */
    height: auto;
  }

  img.header-logo-2 {
    width: 9.375rem; /* 150px */
  }

  .header-logos {
    gap: 1.053125rem; /* 16.85px */
  }

  .header-nav ul,
  .site-header.is-sticky .header-nav ul {
    gap: 1.875rem; /* 30px */
  }

  .header-nav a,
  .site-header.is-sticky .header-nav a {
    font-size: 1rem; /* 16px */
  }

  .header-nav {
    margin-right: 1.25rem; /* 20px */
  }

  .btn {
    padding-top: 0.5rem; /* 8px */
    padding-bottom: 0.5rem; /* 8px */
    padding-left: 0.625rem; /* 10px */
    padding-right: 0.625rem; /* 10px */
  }
}

/* Large Tablet / Small Desktop (max-width: 1200px) */
@media (max-width: 1200px) {
  .header-nav,
  .header-actions .btn-enrollment {
    display: none;
  }

  .hamburger-menu,
  .mobile-nav,
  .mobile-nav-overlay {
    display: flex;
  }
  .header-logo-1 {
    width: 3.75rem; /* 60px */
  }
  .header-logo-2 {
    width: 9.375rem; /* 150px */
  }
  .mobile-nav {
    display: block;
  }

  .header-content {
    justify-content: space-between;
  }

  .header-actions {
    gap: 0.9375rem; /* 15px */
  }
  .btn {
    padding-top: 0.5rem; /* 8px */
    padding-bottom: 0.5rem; /* 8px */
    padding-left: 0.625rem; /* 10px */
    padding-right: 0.625rem; /* 10px */
  }
}

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
  .site-header {
    padding: 1.25rem 0 0.9375rem 0; /* 20px 0 15px 0 */
  }

  .site-header.is-sticky {
    padding: 0.625rem 0; /* 10px 0 */
  }

  .header-logo-1 {
    width: 4.375rem; /* 70px */
  }

  .site-header.is-sticky .header-logo-1 {
    width: 3.75rem; /* 60px */
  }

  .lang-switch {
    font-size: 1rem; /* 16px */
    margin-right: 0.625rem; /* 10px */
  }

  .search-icon {
    margin-right: 0.625rem; /* 10px */
  }
}

/* Mobile (max-width: 768px) */

@media (min-width: 768px) {
  header .mobile-menu-extras {
    display: none;
  }
}
@media (max-width: 768px) {
  .site-header {
    padding: 0.9375rem 0; /* 15px 0 */
  }

  .site-header.is-sticky {
    padding: 0.625rem 0; /* 10px 0 */
  }

  .header-content {
    padding-left: 0;
    padding-right: 0;
  }

  .header-logo-1 {
    width: 3.75rem; /* 60px */
  }

  .site-header.is-sticky .header-logo-1 {
    width: 3.4375rem; /* 55px */
  }

  .header-logos {
    gap: 0.9375rem; /* 15px */
  }

  .lang-switch {
    font-size: 0.875rem; /* 14px */
    margin-right: 0.5rem; /* 8px */
  }

  .search-icon {
    margin-right: 0.5rem; /* 8px */
  }

  .search-icon img {
    width: 1.125rem; /* 18px */
    height: 1.125rem; /* 18px */
  }

  .mobile-nav {
    width: 60%;
    right: -60%;
    padding: 4.375rem 1.5625rem 1.5625rem; /* 70px 25px 25px */
  }

  .mobile-nav a {
    font-size: 1rem; /* 16px */
  }
}
/* ==========================================================================
   Mobile Menu Extras (Toll Free & CTA)
   ========================================================================== */
/* Small Mobile (max-width: 576px) */
@media (max-width: 576px) {
  .site-header {
    padding: 0.75rem 0; /* 12px 0 */
  }

  .site-header.is-sticky {
    padding: 0.5rem 0; /* 8px 0 */
  }

  .header-logo-1 {
    width: 3.4375rem; /* 55px */
  }

  .site-header.is-sticky .header-logo-1 {
    width: 3.125rem; /* 50px */
  }
  .header-actions {
    margin-left: auto;
  }

  .header-logos {
    gap: 0.625rem; /* 10px */
  }
  .hamburger-menu {
    width: 2.1875rem; /* 35px */
    height: 2.1875rem; /* 35px */
  }

  .hamburger-menu span {
    width: 1.25rem; /* 20px */
  }

  .mobile-nav {
    width: 60%;
    right: -60%;
    padding: 3.75rem 1.25rem 1.25rem; /* 60px 20px 20px */
  }

  .mobile-nav a {
    font-size: 0.9375rem; /* 15px */
    padding: 0.5rem 0; /* 8px 0 */
  }

  .mobile-nav li {
    margin-bottom: 0.9375rem; /* 15px */
  }

  .mobile-menu-extras {
    margin-top: 1.875rem; /* 30px */
    padding-top: 1.875rem; /* 30px */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20px */
  }

  /* Ensure Toll Free Text is visible/styled correctly */
  .mobile-menu-extras .header-toll-free {
    display: none; /* Hidden by default (e.g. tablet), shown below 576px */
    margin-right: 0;
    gap: 0.625rem;
  }
  .mobile-menu-extras .header-toll-free span:last-child {
    font-size: 1.125rem; /* 18px */
    color: var(--enaya-black);
  }

  /* CTA styling in mobile menu */
  .mobile-menu-extras .mobile-cta {
    width: 100%;
  }
  /* Target any button inside mobile-cta */
  .mobile-menu-extras .mobile-cta .btn,
  .mobile-menu-extras .mobile-cta a {
    width: 100%;
    display: flex; /* Ensure it is flex to center content if it's a flex container */
    justify-content: center;
    text-align: center;
    color: #ffffff;
  }

  /* Hide Toll Free from Header Actions */
  .header-actions .header-toll-free {
    display: none;
  }

  /* Show Toll Free in Mobile Menu */
  .mobile-menu-extras .header-toll-free {
    display: flex;
  }

  .header-toll-free span:first-child {
    font-size: 1rem;
  }

  .header-cta {
    display: none;
  }
}
