/**
 * HoplaCollect Sections Layout Styles
 * Tabs and basic section organization for the campaign page
 * Version 3.0 - ControleWeb Inspired Design
 */

/* Global element spacing overrides */
.hc-campaign {
  padding-top: var(--hc-space-8, 2rem);
  padding-inline: var(--hc-space-6, 1.5rem);
  max-width: 1400px;
  margin: 0 auto;
  /* Évite tout scroll horizontal au niveau de la page : si un élément
   * déborde, on le coupe au lieu de laisser le navigateur paner la page
   * pendant un swipe horizontal. */
  overflow-x: clip;
}

/* WooCommerce minor override */
.woocommerce-js h2 {
  margin-bottom: 0;
}

/* Navbar wrapper for campaign sections */
.hc-navbar {
  margin: var(--hc-space-10, 2.5rem) 0;
  padding: var(--hc-space-2, 0.5rem) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hc-space-2, 0.5rem);
}

#hc-navbar-tabs {
  padding: 10px;
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.06), 0 16px 50px -12px rgba(0, 0, 0, 0.12); */
  /* border-radius: 50px; */
  border: solid 1px #14141414;
}

/* Tabs navigation */
.hc-sections-tabs {
  display: flex;
  gap: var(--hc-space-1, 0.25rem);
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}


.hc-sections-tab-link,
.hc-sections-tab-link:link,
.hc-sections-tab-link:visited {
  position: relative;
  padding: var(--hc-space-3, 0.75rem) var(--hc-space-5, 1.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hc-space-2, 0.5rem);
  text-decoration: none;
  color: var(--hc-gray-600, #57534e);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.025em;
  border-radius: var(--hc-radius-full, 9999px);
  transition: all var(--hc-transition-fast, 150ms);
  white-space: nowrap;
  border: none !important;
  outline: none;
}

.hc-sections-tab-link:hover {
  color: var(--hc-primary-600, #2563eb);
}

/* Tab count badge */
.hc-tab-count {
  position: absolute;
  top: 0;
  right: 5px;
  transform: translate(0, 45%);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  padding: 3px 5px;
  border-radius: 999px;
  background: none;
  color: var(--hc-gray-500, #6b7280);
  text-align: center;
  pointer-events: none;
}

.hc-sections-tab-link[data-active="true"] .hc-tab-count {
  background: none;
  color: var(--hc-gray-500, #6b7280);
}

.hc-sections-tab-link:focus,
.hc-sections-tab-link[data-active="true"] {
  color: var(--hc-primary-600, #2563eb);
}

/* Mobile nav toggle button */
.hc-navbar-toggle {
  margin-left: auto;
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: var(--hc-space-2, 0.5rem);
  padding: var(--hc-space-3, 0.75rem) var(--hc-space-5, 1.25rem);
  background: var(--hc-gray-100, #f1f5f9);
  border: 1px solid var(--hc-gray-200, #e2e8f0);
  border-radius: var(--hc-radius-full, 9999px);
  cursor: pointer;
  font: inherit;
  color: var(--hc-gray-700, #334155);
  box-shadow: var(--hc-shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
  transition: all var(--hc-transition-fast, 150ms);
}

.hc-navbar-toggle:hover,
.hc-navbar-toggle:focus-visible {
  background: var(--hc-gray-200, #e2e8f0);
  border-color: var(--hc-gray-300, #cbd5e1);
  color: var(--hc-gray-900, #0f172a);
  box-shadow: var(--hc-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1));
  outline: none;
}

.hc-navbar-toggle-text {
  font-size: var(--hc-text-sm, 0.875rem);
  font-weight: var(--hc-font-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hamburger icon for mobile */
.hc-navbar-toggle::before {
  content: '☰';
  font-size: 1.1rem;
}

/* Tab sections */
.hc-sections-tab {
  display: none;
  animation: hc-fade-in var(--hc-transition-slow, 300ms) ease-out;
}

.hc-sections-tab[data-active="true"] {
  display: flex;
  flex-direction: column;
}

@keyframes hc-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tab sections wrapper */
.hc-sections-tab-sections {
  margin-top: var(--hc-space-8, 2rem);
  /* Empeche le navigateur de paner horizontalement pendant un swipe :
   * seul le scroll vertical reste pris en charge nativement, le geste
   * horizontal est exclusivement géré par notre JS (changement d'onglet). */
  touch-action: pan-y;
}

/* Tablet: allow wrapping if needed, but keep tabs visible (no burger) */
@media (max-width: 992px) {
  .hc-navbar {
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: var(--hc-radius-xl, 1.5rem);
    padding: var(--hc-space-3, 0.75rem);
  }

  .hc-sections-tabs {
    gap: var(--hc-space-2, 0.5rem);
  }

  .hc-sections-tab-link {
    padding: var(--hc-space-2, 0.5rem) var(--hc-space-4, 1rem);
    font-size: var(--hc-text-xs, 0.75rem);
  }
}

/* Phones: navbar becomes burger */
@media (max-width: 576px) {
  /* Le menu est sticky par défaut en mobile (comportement historique).
   * L'admin peut le désactiver via la page Overview → onglet Navigation,
   * ce qui ajoute la classe `.hc-navbar--no-mobile-sticky` au <nav>.
   *
   * `top` utilise une variable CSS alimentée par le JS inline (cf. layout.php) :
   * il détecte la hauteur du header sticky/fixed du thème WordPress
   * (le cas échéant) pour que notre menu se colle JUSTE EN-DESSOUS et non
   * pardessus. Fallback : 0px (collage en haut absolu). */
  .hc-navbar {
    position: sticky;
    position: -webkit-sticky;
    top: var(--hc-sticky-top-offset, 0px);
    z-index: 100;
    margin: var(--hc-space-6, 1.5rem) 0;
    border-radius: var(--hc-radius-lg, 1rem);
    padding: var(--hc-space-3, 0.75rem);
  }

  /* Opt-out : remet le menu en flux normal (il défile avec la page). */
  .hc-navbar.hc-navbar--no-mobile-sticky {
    position: static;
    top: auto;
    z-index: auto;
  }

  .hc-navbar-toggle {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
  }

  .hc-sections-tabs {
    display: none;
    flex-direction: column;
    gap: var(--hc-space-1, 0.25rem);
    width: 100%;
    margin-top: var(--hc-space-3, 0.75rem);
    padding: var(--hc-space-3, 0.75rem);
    border-top: 1px solid var(--hc-gray-200, #e2e8f0);
    background: var(--hc-white, #ffffff);
    border-radius: var(--hc-radius-lg, 1rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .hc-navbar.hc-navbar-open .hc-sections-tabs {
    display: flex;
  }


  .hc-sections-tab-link {
    padding: var(--hc-space-3, 0.75rem) var(--hc-space-4, 1rem);
    border-radius: var(--hc-radius-md, 0.75rem);
    justify-content: center;
    width: 100%;
  }

  .hc-navbar-toggle-text {
    font-size: var(--hc-text-sm, 0.875rem);
  }
}

/* Indicateur visuel du swipe horizontal (mobile)
 * - chevron seul : visible en permanence quand la zone est à l'écran
 * - chevron + queue : pendant le swipe actif
 * Les chevrons sont fixés au centre vertical de l'écran et NE BOUGENT PAS :
 * la queue est positionnée en absolu, hors du conteneur, pour ne pas affecter
 * la position du chevron.
 */
/* Sélecteur double pour gagner en spécificité sur les styles génériques
 * de <button> que les thèmes WordPress appliquent souvent. */
button.hc-swipe-indicator {
  --hc-swipe-progress: 0;
  --hc-swipe-tail-length: 36px;
  position: fixed;
  top: 50%;
  width: 9px;
  height: 16px;
  /* Reset complet des défauts <button> pour éviter qu'un thème ne masque ou déforme l'indicateur */
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  text-decoration: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--hc-primary-600, #2563eb);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transform: translateY(-50%);
  will-change: opacity, color;
  transition: opacity 250ms ease, color 200ms ease, visibility 0s linear 250ms;
}

/* Zone de tap étendue (vers l'intérieur de l'écran) sans agrandir le visuel */
button.hc-swipe-indicator::before {
  content: '';
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -8px;
  right: -24px;
}

button.hc-swipe-indicator-left  { left: 8px; }
button.hc-swipe-indicator-right { right: 8px; }

button.hc-swipe-indicator-right::before {
  left: -24px;
  right: -8px;
}

button.hc-swipe-indicator svg {
  display: block;
  width: 9px;
  height: 16px;
  stroke-width: 2;
}

/* Visible uniquement quand la zone d'onglets est à l'écran (sous le menu) */
button.hc-swipe-indicator.hc-swipe-zone-visible {
  opacity: 0.25;
  visibility: visible;
  transition-delay: 0s;
}

/* Feedback tactile : léger flash à la pression */
button.hc-swipe-indicator:not(:disabled):active {
  opacity: 0.85;
}

/* Aux extrémités (pas d'onglet voisin) : chevron atténué, non cliquable */
button.hc-swipe-indicator:disabled {
  opacity: 0.12 !important;
  cursor: default;
}

/* Pendant le swipe actif : opacité accentuée */
button.hc-swipe-indicator.hc-swipe-active {
  opacity: calc(0.4 + var(--hc-swipe-progress) * 0.5);
}

/* Seuil de validation atteint */
button.hc-swipe-indicator.hc-swipe-ready {
  color: var(--hc-primary-700, #1d4ed8);
}

/* Queue de la flèche (apparait/grandit uniquement pendant le swipe).
 * Position absolue, ancrée au bouton (containing block via position:fixed). */
.hc-swipe-tail {
  position: absolute;
  top: 50%;
  height: 2px;
  width: calc(var(--hc-swipe-progress) * var(--hc-swipe-tail-length));
  border-radius: 999px;
  transform: translateY(-50%);
  transition: width 70ms linear;
  pointer-events: none;
}

button.hc-swipe-indicator-left .hc-swipe-tail {
  left: 100%;
  margin-left: 4px;
  background: linear-gradient(to right, currentColor, transparent);
}

button.hc-swipe-indicator-right .hc-swipe-tail {
  right: 100%;
  margin-right: 4px;
  background: linear-gradient(to left, currentColor, transparent);
}

@media (min-width: 769px) {
  button.hc-swipe-indicator {
    display: none !important;
  }
}