/* ============================================================
   CPT Navigator Widget — styles
   ============================================================ */

/* ── Custom properties (overridable par le thème) ── */
:root {
  --cptnav-gap:          0.375rem;
  --cptnav-btn-size:     2.25rem;       /* 36 px */
  --cptnav-action-size:  1.875rem;      /* 30 px */
  --cptnav-icon-size:    1.125rem;      /* 18 px */
  --cptnav-radius:       0.5rem;
  --cptnav-radius-full:  9999px;
  --cptnav-color-bg:     #f7f6f2;
  --cptnav-color-border: rgba(40,37,29,.12);
  --cptnav-color-text:   #28251d;
  --cptnav-color-muted:  #7a7974;
  --cptnav-color-accent: #01696f;
  --cptnav-color-hover:  #0c4e54;
  --cptnav-color-add:    #437a22;       /* vert pour le bouton "+" */
  --cptnav-color-edit:   #006494;      /* bleu pour le bouton édition */
  --cptnav-color-disabled-bg:   rgba(40,37,29,.05);
  --cptnav-color-disabled-icon: rgba(40,37,29,.25);
  --cptnav-transition:   180ms cubic-bezier(0.16,1,0.3,1);
  --cptnav-shadow:       0 2px 8px rgba(40,37,29,.08);
}

/* ── Conteneur principal ── */
.cpt-nav {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--cptnav-gap);
  padding:          0.5rem;
  background:       var(--cptnav-color-bg);
  border:           1px solid var(--cptnav-color-border);
  border-radius:    var(--cptnav-radius);
  box-shadow:       var(--cptnav-shadow);
  font-family:      inherit;
  width:            fit-content;
  max-width:        100%;
}

/* ── Boutons fléchés (prev / next) ── */
.cpt-nav__btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--cptnav-btn-size);
  height:          var(--cptnav-btn-size);
  border-radius:   var(--cptnav-radius);
  color:           var(--cptnav-color-text);
  text-decoration: none;
  transition:      background var(--cptnav-transition),
                   color var(--cptnav-transition),
                   box-shadow var(--cptnav-transition);
  flex-shrink:     0;
}
.cpt-nav__btn:hover:not(.cpt-nav__btn--disabled) {
  background: var(--cptnav-color-accent);
  color:      #fff;
  box-shadow: 0 2px 6px rgba(1,105,111,.35);
}
.cpt-nav__btn:active:not(.cpt-nav__btn--disabled) {
  background: var(--cptnav-color-hover);
  color:      #fff;
}
.cpt-nav__btn--disabled {
  color:          var(--cptnav-color-disabled-icon);
  background:     var(--cptnav-color-disabled-bg);
  cursor:         default;
  pointer-events: none;
}
.cpt-nav__btn svg {
  width:        var(--cptnav-icon-size);
  height:       var(--cptnav-icon-size);
  stroke:       currentColor;
  stroke-width: 2.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
  fill:         none;
  flex-shrink:  0;
}

/* ── Colonne centrale ── */
.cpt-nav__center {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--cptnav-gap);
}

/* ── Boutons d'action (archive, +, édition) ── */
.cpt-nav__action {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-width:       var(--cptnav-action-size);
  min-height:      var(--cptnav-action-size);
  padding:         0.25rem 0.5rem;
  border-radius:   var(--cptnav-radius);
  text-decoration: none;
  gap:             0.2rem;
  transition:      background var(--cptnav-transition),
                   color var(--cptnav-transition),
                   box-shadow var(--cptnav-transition);
}
.cpt-nav__action svg {
  width:        var(--cptnav-icon-size);
  height:       var(--cptnav-icon-size);
  stroke:       currentColor;
  stroke-width: 2;
  stroke-linecap:  round;
  stroke-linejoin: round;
  fill:         none;
  flex-shrink:  0;
}

/* archive */
.cpt-nav__action--archive {
  color: var(--cptnav-color-accent);
}
.cpt-nav__action--archive:hover {
  background: var(--cptnav-color-accent);
  color:      #fff;
  box-shadow: 0 2px 6px rgba(1,105,111,.35);
}

/* + nouveau */
.cpt-nav__action--new {
  color: var(--cptnav-color-add);
}
.cpt-nav__action--new:hover {
  background: var(--cptnav-color-add);
  color:      #fff;
  box-shadow: 0 2px 6px rgba(67,122,34,.35);
}

/* édition */
.cpt-nav__action--edit {
  color: var(--cptnav-color-edit);
}
.cpt-nav__action--edit:hover {
  background: var(--cptnav-color-edit);
  color:      #fff;
  box-shadow: 0 2px 6px rgba(0,100,148,.35);
}

/* ── Compteur de position ── */
.cpt-nav__position {
  font-size:      0.625rem;   /* 10 px */
  line-height:    1;
  letter-spacing: 0.03em;
  color:          var(--cptnav-color-muted);
  white-space:    nowrap;
  font-variant-numeric: tabular-nums;
}
.cpt-nav__action--archive:hover .cpt-nav__position {
  color: rgba(255,255,255,.8);
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --cptnav-color-bg:            #1c1b19;
    --cptnav-color-border:        rgba(205,204,202,.1);
    --cptnav-color-text:          #cdccca;
    --cptnav-color-muted:         #797876;
    --cptnav-color-accent:        #4f98a3;
    --cptnav-color-hover:         #227f8b;
    --cptnav-color-add:           #6daa45;
    --cptnav-color-edit:          #5591c7;
    --cptnav-color-disabled-bg:   rgba(205,204,202,.06);
    --cptnav-color-disabled-icon: rgba(205,204,202,.2);
    --cptnav-shadow:              0 2px 8px rgba(0,0,0,.3);
  }
}

/* ── Focus visible ── */
.cpt-nav__btn:focus-visible,
.cpt-nav__action:focus-visible {
  outline:        2px solid var(--cptnav-color-accent);
  outline-offset: 2px;
}

/* ── Réduction de mouvement ── */
@media (prefers-reduced-motion: reduce) {
  .cpt-nav__btn,
  .cpt-nav__action { transition: none; }
}