/* =====================================================
   MESKI — Habillage de la navigation (topbar + menu + mobile)
   Fichier : meski-nav.css — RACINE du thème enfant
   Chargé sur TOUT le site (le header est partout), section
   15 du functions.php.

   Basé sur les classes standard du thème Astra. Si un
   sélecteur ne s'accroche pas chez vous (structure de menu
   personnalisée), envoyez une capture de l'inspecteur sur
   l'élément concerné — correction en une ligne.
===================================================== */

:root {
  --meski-noir:      #151009;
  --meski-blanc:     #fbfaf7;
  --meski-or:        #c3a04e;
  --meski-or-clair:  #e7d191;
  --meski-ambre:     #9a6a20;
  --meski-vert:      #2f5544;
  --meski-hairline:  rgba(195,160,78,.4);
}

/* =====================================================
   1. TOPBAR ("Welcome to the House of Meski" / Order Now)
===================================================== */
#ast-scroll-top-wrap ~ *,
.ast-above-header-wrap,
.ast-above-header-section {
  border-bottom: 1px solid var(--meski-hairline) !important;
}
.ast-above-header-section p,
.ast-above-header-section div,
.ast-above-header-section span,
.ast-above-header-section a {
  font-family: 'Jost', sans-serif !important;
  font-size: .68rem !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--meski-ambre) !important;
}
.ast-above-header-section a:hover { color: var(--meski-vert) !important; }
/* Le numéro de téléphone reste net et lisible, pas en capitales tassées */
.ast-above-header-section a[href^="tel:"] { letter-spacing: .05em; }

/* =====================================================
   2. MENU PRINCIPAL
===================================================== */
.main-header-menu .menu-item > a,
.ast-header-navigation-arrow {
  font-family: 'Jost', sans-serif !important;
  font-weight: 400 !important;
  font-size: .82rem !important;
  letter-spacing: .08em;
  color: var(--meski-noir) !important;
  transition: color .3s ease;
}
.main-header-menu .menu-item > a:hover {
  color: var(--meski-vert) !important;
}
/* Page courante : soulignée en or plutôt qu'en couleur pleine */
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a {
  color: var(--meski-noir) !important;
  border-bottom: 1px solid var(--meski-or);
  padding-bottom: 4px;
}

/* =====================================================
   3. SOUS-MENUS DÉROULANTS (Shop, About Meski...)
===================================================== */
.main-header-menu .sub-menu {
  background: var(--meski-blanc) !important;
  border: 1px solid var(--meski-hairline) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 28px rgba(21,16,9,.12) !important;
  padding: .4rem 0 !important;
}
.main-header-menu .sub-menu .menu-item > a {
  font-family: 'Jost', sans-serif !important;
  font-size: .78rem !important;
  letter-spacing: .04em;
  color: var(--meski-noir) !important;
  padding: .65rem 1.4rem !important;
  transition: background .25s ease, color .25s ease;
}
.main-header-menu .sub-menu .menu-item > a:hover {
  background: rgba(47,85,68,.06) !important;
  color: var(--meski-vert) !important;
}

/* =====================================================
   4. ICÔNES (compte, recherche, panier)
===================================================== */
.ast-header-navigation .astra-icon,
.ast-header-navigation svg,
.ast-icon svg {
  color: var(--meski-noir);
  fill: var(--meski-noir);
  transition: color .3s ease, fill .3s ease;
}
.ast-header-navigation a:hover .astra-icon,
.ast-header-navigation a:hover svg {
  color: var(--meski-vert);
  fill: var(--meski-vert);
}
/* Bouton panier : coins nets, comme partout sur le site */
.ast-site-header-cart .ast-cart-menu-wrap,
.ast-cart-menu-wrap {
  border-radius: 0 !important;
}
/* Badge du nombre d'articles : noir plutôt que rouge/marron,
   pour rester dans la palette de la maison */
.ast-cart-menu-wrap .count,
.cart-container .count {
  background: var(--meski-noir) !important;
  color: var(--meski-or-clair) !important;
  border-radius: 50% !important;
}

/* =====================================================
   5. MENU MOBILE (tiroir hamburger)
===================================================== */
.ast-mobile-popup-drawer,
.ast-mobile-header-wrap {
  background: var(--meski-blanc) !important;
}
.ast-mobile-popup-drawer .main-header-menu .menu-item > a {
  font-family: 'Jost', sans-serif !important;
  font-size: .95rem !important;
  letter-spacing: .04em;
  color: var(--meski-noir) !important;
  border-bottom: 1px solid var(--meski-hairline);
  padding: 1rem 0 !important;
}
.ast-mobile-menu-buttons svg,
.menu-toggle-icon,
button.menu-toggle .astra-icon {
  color: var(--meski-ambre) !important;
  fill: var(--meski-ambre) !important;
}

/* =====================================================
   6. LIGNE DE SÉPARATION DU HEADER
   Un filet fin, comme partout sur le site, plutôt qu'une
   bande sombre épaisse.
===================================================== */
.site-header,
#masthead {
  border-bottom: 1px solid var(--meski-hairline) !important;
  box-shadow: none !important;
}

/* =====================================================
   7. BANDEAU TOPBAR DÉFILANT (bilingue)
   Le message de gauche défile en boucle ; "Order Now" et
   le téléphone à droite restent fixes (CTA, pas décoratif).
===================================================== */
.meski-ticker {
  overflow: hidden;
  white-space: nowrap;
  max-width: 420px;
}
.meski-ticker-track {
  display: inline-flex;
  animation: meski-ticker-scroll 26s linear infinite;
  will-change: transform;
}
.meski-ticker:hover .meski-ticker-track {
  animation-play-state: paused;   /* pause au survol, geste de confort */
}
.meski-ticker-item {
  display: inline-flex;
  align-items: center;
  padding-right: 2.6rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--meski-ambre);
}
.meski-ticker-item[dir="rtl"] {
  font-family: 'Amiri', serif;
  font-size: .92rem;
  letter-spacing: 0;
  text-transform: none;
  direction: rtl;
}
/* La promesse ("Where Heritage Meets Luxury") : registre de
   phrase, pas d'étiquette — normale, italique, plus douce
   que le nom de la maison qui l'entoure. */
.meski-ticker-item.tagline {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--meski-ambre);
}
@keyframes meski-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .meski-ticker-track { animation: none; }
}
@media (max-width: 600px) {
  .meski-ticker { max-width: 220px; }
}