/**
 * Headers Common - Styles partagés entre tous les headers
 *
 * Ce fichier contient les styles communs à tous les headers desktop
 * Styles spécifiques à chaque header : voir headers/desktop/header-X.css
 *
 * @package Dioqa_UI_Kit
 */

/* ============================================
   LOGO & BRANDING
   ============================================ */

.navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-right: 1rem;
}

.navbar-brand a {
  text-decoration: none;
  color: inherit;
}

.logo-header,
.custom-logo {
  max-height: 50px;
  width: auto;
  height: auto;
  transition: opacity 0.3s ease;
}

.navbar-brand:hover .logo-header,
.navbar-brand:hover .custom-logo {
  opacity: 0.85;
}

/* ============================================
   BURGER MENU BUTTON (commun à tous les headers)
   ============================================ */

.menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.burger-icon .line {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform-origin: center;
}

.burger-icon .line.top {
  transform-origin: 23% 16%;
}

.burger-icon .line.bottom {
  transform-origin: 50% 100%;
}

.menu-btn.active .burger-icon .line.top {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.active .burger-icon .line.middle {
  opacity: 0;
}

.menu-btn.active .burger-icon .line.bottom {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   HEADER ACTIONS (éléments optionnels)
   ============================================ */

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

.header-phone {
  color: inherit;
  transition: opacity 0.3s ease;
}

.header-phone:hover {
  opacity: 0.8;
  color: inherit;
}

.header-search-toggle,
.header-cart {
  background: none;
  border: none;
  padding: 0.5rem;
  font-size: 1.25rem;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.3s ease;
  position: relative;
}

.header-search-toggle:hover,
.header-cart:hover {
  opacity: 0.8;
}

.cart-count {
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  min-width: 1.25rem;
}

/* ============================================
   HEADER STICKY (si activé)
   ============================================ */

.site-header.fixed-top {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 991.98px) {
  .logo-header,
  .custom-logo {
    max-height: 40px;
  }

  .navbar-brand {
    margin-right: 0.5rem;
  }

  .header-search-toggle {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .logo-header,
  .custom-logo {
    max-height: 35px;
  }
}