/**
* Header styles for the AFEL theme

* @package AFEL
*/

/*--------------------------------------------------------------
# Preloader Styles
--------------------------------------------------------------*/

.afel-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--afel-body-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.afel-preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.afel-preloader-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prevent content shift by always showing scrollbar space */
.afel-preloader-enabled {
  overflow-y: scroll !important;
}

/* Alternative: Force scrollbar to always be visible */
html {
  overflow-y: scroll;
}

@keyframes afel-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Spinner Style */
.afel-spinner {
  width: 140px;
  height: 140px;
  border: 4px solid var(--afel-border-color, #e0e0e0);
  border-top: 4px solid var(--afel-brand-color, #007cba);
  border-radius: 50%;
  animation: afel-spin 1s linear infinite;
}

@keyframes afel-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Dots Style */
.afel-dots {
  display: flex;
  gap: 8px;
}

.afel-dot {
  width: 12px;
  height: 12px;
  background-color: var(--afel-brand-color, #007cba);
  border-radius: 50%;
  animation: afel-bounce 1.4s ease-in-out infinite both;
}

.afel-dot:nth-child(1) {
  animation-delay: -0.32s;
}
.afel-dot:nth-child(2) {
  animation-delay: -0.16s;
}
.afel-dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes afel-bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Circle Style */
.afel-circle-loader {
  width: 50px;
  height: 50px;
  border: 5px solid var(--afel-border-color, #e0e0e0);
  border-radius: 50%;
  border-top-color: var(--afel-brand-color, #007cba);
  animation: afel-circle-spin 1s ease-in-out infinite;
}

@keyframes afel-circle-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Custom Image Style */
.afel-custom-preloader {
  max-width: 100px;
  max-height: 100px;
}

.afel-custom-preloader img {
  width: 100%;
  height: auto;
  max-width: 100px;
  max-height: 100px;
  animation: afel-pulse 1.5s ease-in-out infinite;
}

@keyframes afel-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* Dark mode support */
.afel-dark-mode .afel-preloader {
  background-color: var(--afel-dark-bg, #1a1a1a);
}

/* Prevent scrolling when preloader is active */
body.afel-preloader-enabled {
  overflow: hidden;
}

body.afel-preloader-loaded {
  overflow: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .afel-spinner {
    width: 35px;
    height: 35px;
    border-width: 3px;
  }

  .afel-circle-loader {
    width: 40px;
    height: 40px;
    border-width: 4px;
  }

  .afel-dot {
    width: 10px;
    height: 10px;
  }

  .afel-custom-preloader {
    max-width: 80px;
    max-height: 80px;
  }
}

/*--------------------------------------------------------------
# Header Basics
--------------------------------------------------------------*/
.afel-header {
  position: relative;
  background-color: var(--afel-body-bg);
  border-bottom: 1px solid var(--afel-border-color);
  z-index: var(--afel-z-index-sticky);
  height: var(--afel-header-height);
  transition: background-color var(--afel-transition-normal),
    box-shadow var(--afel-transition-normal);
}

.afel-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo styles */
.afel-header-logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.afel-logo {
  display: block;
  max-height: calc(var(--afel-header-height) - 20px);
  width: auto;
}

.afel-light-mode-logo,
.afel-dark-mode-logo {
  display: block;
  max-height: calc(var(--afel-header-height) - 20px);
  width: auto;
}

.afel-dark-mode-logo {
  display: none;
}

.afel-dark-mode .afel-light-mode-logo {
  display: none;
}

.afel-dark-mode .afel-dark-mode-logo {
  display: block;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--afel-primary-text-color);
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.afel-main-navigation {
  display: flex;
  align-items: center;
}

.afel-menu-container {
  height: 100%;
}

.afel-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.afel-menu li {
  position: relative;
  display: flex;
  align-items: center;
}

.afel-menu a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--afel-primary-text-color);
  font-weight: 400;
  text-decoration: none;
  height: 100%;
  transition: color var(--afel-transition-normal);
}

.afel-menu a:hover,
.afel-menu .current-menu-item > a,
.afel-menu .current-menu-ancestor > a {
  color: var(--afel-link-color);
}

/* Desktop dropdown menu chevron icons */
.afel-menu .menu-item-has-children > a {
  position: relative;
  padding-right: calc(16px + 10px);
}

.afel-menu .menu-item-has-children > a .afel-submenu-icon {
  transition: transform var(--afel-transition-normal);
  margin-top: 2px;
}

/* Rotate chevron on hover */
.afel-menu .menu-item-has-children:hover > a .afel-submenu-icon {
  transform: rotate(180deg);
}

/* Ensure the icon is properly positioned */
.afel-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Dropdown menus */
.afel-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: var(--afel-body-bg);
  border: 1px solid var(--afel-border-color);
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--afel-transition-normal);
  z-index: var(--afel-z-index-dropdown);
  padding: 10px 0;
  list-style: none;
  margin: 0;
}

.afel-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.afel-menu .sub-menu li {
  display: block;
  width: 100%;
}

.afel-menu .sub-menu a {
  padding: 10px 16px;
  height: auto;
}

/*--------------------------------------------------------------
# Header Actions
--------------------------------------------------------------*/
.afel-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Search styles */
.afel-header-search {
  position: relative;
}

.afel-search-toggle {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--afel-primary-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--afel-transition-normal) ease;
}

.afel-search-toggle:hover {
  color: var(--afel-brand-color);
  background-color: var(--afel-brand-color-bg);
}

.afel-search-toggle svg {
  width: 20px;
  height: 20px;
}

/* Expanding search form container */
.afel-hero-search.afel-search-form-container {
  /* top: var(--afel-header-height); */
  width: 100vw;
  max-width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: var(--afel-light-bg);
  z-index: var(--afel-z-index-dropdown);
  padding: 0 46px;
  transition: max-height var(--afel-transition-normal) ease,
    padding var(--afel-transition-normal) ease;
}

.afel-search-form-container.active {
  max-height: 200px;
  padding: 46px;
  border-bottom: 1px solid var(--afel-border-color);
}

.afel-hero-search.afel-search-form-container .afel-search-form-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.afel-search-form-container .search-form {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  width: 100%;
}

.afel-search-form-container .search-field {
  flex: 1;
  /* padding: 14px 24px; */
  margin: 0;
  font-size: 1.125rem;
  border-radius: 999px;
  background-color: var(--afel-body-bg);
  color: var(--afel-primary-text-color);
  width: 100%;
  transition: border-color var(--afel-transition-normal) ease;
}

.afel-search-form-container .search-field:focus {
  border-color: var(--afel-brand-color);
  outline: none;
}

.afel-hero-search.afel-search-form-container
  .afel-hero-search-submit.afel-search-submit {
  top: 4px;
  padding: 16px;
  border-radius: 999px;
}

.afel-hero-search.afel-search-form-container
  .afel-hero-search-submit.afel-search-submit
  svg {
  width: 25px;
  height: 25px;
  min-width: 25px;
}

.afel-search-close {
  position: absolute;
  top: -30px;
  right: -20px;
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--afel-secondary-text-color);
  transition: color var(--afel-transition-normal) ease;
}

.afel-search-close:hover {
  color: var(--afel-brand-color);
  background-color: var(--afel-brand-color-bg);
}

.afel-search-close svg {
  width: 20px;
  height: 20px;
}

/* Header positioning adjustment */
.afel-header {
  position: relative;
  z-index: var(--afel-z-index-sticky);
}

/* Mobile responsiveness */
@media (max-width: 992px) {
  /* .afel-search-form-container.active {
    margin-top: var(--afel-header-height);
  } */
}

@media (max-width: 768px) {
  .afel-search-form-wrapper {
    max-width: 100%;
  }
}

/* Dark mode toggle */
.afel-dark-mode-toggle {
  display: flex;
  align-items: center;
}

.afel-dark-mode-button,
.afel-log-out-button a {
  background: none;
  border: none;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  color: var(--afel-primary-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.afel-dark-mode-button:hover,
.afel-log-out-button a:hover {
  color: var(--afel-brand-color);
  background-color: var(--afel-brand-color-bg);
}

.afel-dark-mode-button svg,
.afel-log-out-button svg {
  width: 20px;
  height: 20px;
}

.afel-sun-icon {
  display: block;
}

.afel-moon-icon {
  display: none;
}

.afel-dark-mode .afel-sun-icon {
  display: none;
}

.afel-dark-mode .afel-moon-icon {
  display: block;
}

/* Header buttons */
.afel-header-button,
.afel-login-signup {
  display: flex;
  align-items: center;
}

.afel-header-button .afel-button,
.afel-login-signup .afel-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  font-size: 0.875rem;
  border-radius: 999px;
}

.afel-login-signup .afel-button {
  color: var(--afel-secondary-text-color);
  font-weight: 400;
}

.afel-login-signup .afel-button:hover {
  color: #ffffff;
}

/* Mobile Menu Toggle Button */
.afel-mobile-menu-toggle {
  display: none;
}

.afel-menu-toggle {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--afel-primary-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.afel-menu-toggle:hover {
  color: var(--afel-brand-color);
}

.afel-menu-toggle svg {
  width: 24px;
  height: 24px;
}

/*--------------------------------------------------------------
# Mobile Menu
--------------------------------------------------------------*/
.afel-mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  max-width: 80%;
  height: 100%;
  background-color: var(--afel-body-bg);
  z-index: var(--afel-z-index-modal);
  overflow-y: auto;
  transition: right var(--afel-transition-normal);
}

.afel-mobile-menu.active {
  right: 0;
}

.afel-mobile-menu-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
}

.afel-mobile-menu-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--afel-border-color);
  margin-bottom: 4px;
}

.afel-header-logo img {
  max-width: 180px;
  max-height: 40px;
  height: 40px;
  width: auto;
}

.afel-mobile-menu-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--afel-primary-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.afel-mobile-menu-close:hover {
  color: var(--afel-brand-color);
}

.afel-mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

.afel-mobile-navigation {
  flex: 1;
  margin: 16px 0;
}

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

.afel-mobile-menu-list li {
  position: relative;
  /* border-bottom: 1px solid var(--afel-border-color); */
}

.afel-mobile-menu-list li:last-child {
  border-bottom: none;
  margin-bottom: 4px;
}

.afel-mobile-menu-list a {
  display: block;
  padding: 8px 16px 8px 0;
  color: var(--afel-primary-text-color);
  text-decoration: none;
  font-weight: 500;
}

.afel-mobile-menu-list a:hover {
  color: var(--afel-brand-color);
}

.afel-mobile-menu-list .menu-item {
  display: flex;
  flex-wrap: wrap;
}

button.afel-submenu-toggle {
  padding: 4px;
  background-color: transparent;
  border: none;
  color: inherit;
  height: fit-content;
  align-self: center;
}

button.afel-submenu-toggle:hover {
  color: var(--afel-brand-color);
  background-color: var(--afel-brand-color-bg);
}

.afel-mobile-menu-list .sub-menu {
  list-style: none;
  margin: 0;
  margin-left: 16px;
  padding: 0;
  border-left: 2px solid var(--afel-brand-color);
  display: none;
}

.afel-mobile-menu-list .menu-item-has-children.active > .sub-menu {
  display: block;
}

.afel-mobile-menu-list .sub-menu li {
  border-bottom: none;
}

.afel-mobile-menu-list .sub-menu a {
  padding: 4px 16px;
}

.afel-mobile-menu-actions {
  border-top: 1px solid var(--afel-border-color);
  padding-top: 16px;
}

.afel-mobile-dark-mode-toggle {
  display: flex;
  margin-bottom: 16px;
}

.afel-mobile-dark-mode-toggle .afel-dark-mode-button {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  padding: 16px;
  border-radius: 6px;
  background-color: var(--afel-light-bg);
}

.afel-dark-mode-label {
  margin-left: 10px;
}

.afel-mobile-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.afel-mobile-header-button,
.afel-mobile-login-signup {
  width: 100%;
}

.afel-mobile-header-button .afel-button,
.afel-mobile-login-signup .afel-button {
  justify-content: center;
}

/* Mobile menu overlay */
.afel-mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--afel-z-index-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--afel-transition-normal),
    visibility var(--afel-transition-normal);
}

.afel-mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/*--------------------------------------------------------------
# Sticky Header
--------------------------------------------------------------*/
/* Desktop sticky header */
.afel-desktop-sticky-always {
  position: sticky;
  top: 0;
  /* box-shadow: var(--afel-shadow-sm); */
}

.afel-desktop-sticky-scroll-up {
  position: fixed;
  top: -100px;
  left: 0;
  right: 0;
  transition: top var(--afel-transition-normal);
}

.afel-desktop-sticky-scroll-up.sticky-visible {
  top: 0;
  /* box-shadow: var(--afel-shadow-sm); */
}

/* Mobile sticky header styles */
@media (max-width: 992px) {
  .afel-desktop-sticky-always,
  .afel-desktop-sticky-scroll-up {
    position: relative;
    top: 0;
    box-shadow: none;
  }

  .afel-mobile-sticky-always {
    position: sticky;
    top: 0;
    /* box-shadow: var(--afel-shadow-sm); */
  }

  .afel-mobile-sticky-scroll-up {
    position: fixed;
    top: -100px;
    left: 0;
    right: 0;
    transition: top var(--afel-transition-normal);
  }

  .afel-mobile-sticky-scroll-up.sticky-visible {
    top: 0;
    /* box-shadow: var(--afel-shadow-sm); */
  }
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
.afel-top-bar {
  background-color: var(--afel-brand-color);
  border-bottom: 1px solid var(--afel-border-color);
  padding: 4px 0;
  font-size: 0.875rem;
}

.afel-top-bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: var(--afel-container-width);
}

.afel-top-bar-text {
  flex: 1;
  text-align: center;
  font-weight: 600;
}

.afel-top-bar-text a {
  text-decoration: none;
  color: #eff6ff;
}

.afel-top-bar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.afel-top-bar-menu li {
  margin-left: 16px;
}

.afel-top-bar-menu a {
  color: var(--afel-primary-text-color);
  text-decoration: none;
}

.afel-top-bar-menu a:hover {
  color: var(--afel-brand-color);
}

/*--------------------------------------------------------------
# Responsive Styles
--------------------------------------------------------------*/
@media (min-width: 993px) {
  .afel-mobile-menu-toggle {
    display: none;
  }
}

@media (max-width: 992px) {
  .afel-main-navigation,
  .afel-header-button,
  .afel-login-signup {
    display: none;
  }

  .afel-mobile-menu-toggle {
    display: block;
  }

  .afel-header-actions {
    gap: 10px;
  }

  body.afel-mobile-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 576px) {
  .afel-header-container,
  .afel-top-bar-container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .afel-top-bar-container {
    flex-direction: column;
    gap: 4px;
  }

  .afel-top-bar-menu {
    justify-content: center;
  }

  .afel-top-bar-menu li:first-child {
    margin-left: 0;
  }
}