/*
 * Custom Sidebar Categories — Frontend v1.0
 * 4 styles: cards | pills | minimal | numbered
 * Follows WordPress theme CSS variables automatically.
 */

/* ── Token layer ─────────────────────────────────────────
   --csc-accent can be overridden per-widget via inline style.
   Falls back to WP theme primary colour, then a safe blue.
   ─────────────────────────────────────────────────────── */
.csc-widget {
  --csc-accent     : var(--wp--preset--color--primary, #0073aa);
  --csc-accent-rgb : 0, 115, 170;
  --csc-bg         : var(--wp--preset--color--background, #ffffff);
  --csc-surface    : var(--wp--preset--color--secondary, #f8f8f8);
  --csc-text       : var(--wp--preset--color--foreground, #1a1a1a);
  --csc-muted      : var(--wp--preset--color--contrast-3, #6b6b6b);
  --csc-border     : rgba(0,0,0,.09);
  --csc-radius     : 10px;
  --csc-tr         : 0.2s cubic-bezier(.4,0,.2,1);
  --csc-font       : var(--wp--preset--font-family--body, system-ui, -apple-system, sans-serif);

  font-family  : var(--csc-font);
  color        : var(--csc-text);
  width        : 100%;
  box-sizing   : border-box;
}

.csc-widget *, .csc-widget *::before, .csc-widget *::after {
  box-sizing: border-box;
}

/* ── Widget header ───────────────────────────────────── */
.csc-widget__header {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  margin-bottom: 1rem;
}

.csc-widget__title {
  font-family  : var(--csc-font);
  font-size    : 1rem;
  font-weight  : 700;
  color        : var(--csc-text);
  margin       : 0;
  padding      : 0;
  white-space  : nowrap;
  letter-spacing: .01em;
}

.csc-widget__title-line {
  flex         : 1;
  height       : 2px;
  background   : linear-gradient(to right, var(--csc-accent), transparent);
  border-radius: 2px;
  opacity      : .35;
}

/* ── Base list reset ─────────────────────────────────── */
.csc-list {
  list-style : none;
  margin     : 0;
  padding    : 0;
  display    : flex;
  flex-direction: column;
}

.csc-item a { text-decoration: none; }

/* ══════════════════════════════════════════════════════
   STYLE 1 — CARDS
   Each category is a card with a relative post-count
   progress bar underneath the name.
   ══════════════════════════════════════════════════════ */
.csc-style-cards .csc-list {
  gap: 8px;
}

.csc-style-cards .csc-item__link {
  display       : block;
  background    : var(--csc-bg);
  border        : 1px solid var(--csc-border);
  border-radius : var(--csc-radius);
  padding       : .85rem 1rem;
  transition    : box-shadow var(--csc-tr), transform var(--csc-tr), border-color var(--csc-tr);
}

.csc-style-cards .csc-item__link:hover {
  box-shadow   : 0 4px 16px rgba(0,0,0,.1);
  transform    : translateX(3px);
  border-color : var(--csc-accent);
}

.csc-style-cards .csc-item--current .csc-item__link {
  border-color     : var(--csc-accent);
  background       : rgba(var(--csc-accent-rgb, 0,115,170), .06);
  box-shadow       : 0 0 0 3px rgba(var(--csc-accent-rgb, 0,115,170), .12);
}

.csc-style-cards .csc-item__top {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : .5rem;
  margin-bottom  : .5rem;
}

.csc-style-cards .csc-item__name {
  font-size   : .9rem;
  font-weight : 600;
  color       : var(--csc-text);
  line-height : 1.3;
  transition  : color var(--csc-tr);
}

.csc-style-cards .csc-item__link:hover .csc-item__name {
  color: var(--csc-accent);
}

.csc-style-cards .csc-item--current .csc-item__name {
  color: var(--csc-accent);
}

.csc-style-cards .csc-item__count {
  flex-shrink    : 0;
  font-size      : .72rem;
  font-weight    : 700;
  color          : var(--csc-accent);
  background     : rgba(var(--csc-accent-rgb, 0,115,170), .12);
  padding        : 2px 8px;
  border-radius  : 100px;
  letter-spacing : .02em;
}

.csc-style-cards .csc-item__desc {
  display     : block;
  font-size   : .78rem;
  color       : var(--csc-muted);
  margin-bottom: .45rem;
  line-height : 1.4;
}

.csc-style-cards .csc-item__bar {
  height       : 3px;
  background   : var(--csc-border);
  border-radius: 100px;
  overflow     : hidden;
}

.csc-style-cards .csc-item__bar-fill {
  height       : 100%;
  background   : var(--csc-accent);
  border-radius: 100px;
  transition   : width .6s cubic-bezier(.4,0,.2,1);
  opacity      : .7;
}

.csc-style-cards .csc-item--current .csc-item__bar-fill {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════
   STYLE 2 — PILLS
   Compact pill badges in a flex-wrap layout.
   ══════════════════════════════════════════════════════ */
.csc-style-pills .csc-list {
  flex-direction: row;
  flex-wrap     : wrap;
  gap           : 7px;
}

.csc-style-pills .csc-item__link {
  display        : inline-flex;
  align-items    : center;
  gap            : .35rem;
  padding        : .38rem .85rem;
  border-radius  : 100px;
  border         : 1.5px solid var(--csc-border);
  background     : var(--csc-surface);
  color          : var(--csc-text);
  font-size      : .82rem;
  font-weight    : 500;
  transition     : background var(--csc-tr), border-color var(--csc-tr), color var(--csc-tr), transform var(--csc-tr);
  white-space    : nowrap;
}

.csc-style-pills .csc-item__link:hover {
  background   : var(--csc-accent);
  border-color : var(--csc-accent);
  color        : #fff;
  transform    : translateY(-2px);
}

.csc-style-pills .csc-item--current .csc-item__link {
  background   : var(--csc-accent);
  border-color : var(--csc-accent);
  color        : #fff;
  font-weight  : 600;
}

.csc-style-pills .csc-item__name {
  line-height: 1;
}

.csc-style-pills .csc-item__count {
  font-size      : .7rem;
  font-weight    : 700;
  background     : rgba(0,0,0,.12);
  padding        : 1px 6px;
  border-radius  : 100px;
  min-width      : 20px;
  text-align     : center;
  line-height    : 1.6;
}

.csc-style-pills .csc-item--current .csc-item__count,
.csc-style-pills .csc-item__link:hover .csc-item__count {
  background: rgba(255,255,255,.25);
}

/* ══════════════════════════════════════════════════════
   STYLE 3 — MINIMAL
   Slim rows with a right-arrow and subtle hover line.
   ══════════════════════════════════════════════════════ */
.csc-style-minimal .csc-list {
  gap: 0;
}

.csc-style-minimal .csc-item__link {
  display         : flex;
  align-items     : center;
  gap             : .5rem;
  padding         : .65rem 0;
  border-bottom   : 1px solid var(--csc-border);
  color           : var(--csc-text);
  font-size       : .875rem;
  transition      : color var(--csc-tr), padding-left var(--csc-tr);
  position        : relative;
}

.csc-style-minimal .csc-item:last-child .csc-item__link {
  border-bottom: none;
}

.csc-style-minimal .csc-item__link::before {
  content      : '';
  position     : absolute;
  left         : -1rem;
  top          : 0;
  bottom       : 0;
  width        : 3px;
  background   : var(--csc-accent);
  border-radius: 0 2px 2px 0;
  opacity      : 0;
  transition   : opacity var(--csc-tr);
}

.csc-style-minimal .csc-item__link:hover {
  color        : var(--csc-accent);
  padding-left : .5rem;
}

.csc-style-minimal .csc-item__link:hover::before,
.csc-style-minimal .csc-item--current .csc-item__link::before {
  opacity: 1;
}

.csc-style-minimal .csc-item--current .csc-item__link {
  color        : var(--csc-accent);
  font-weight  : 600;
  padding-left : .5rem;
}

.csc-style-minimal .csc-item__name {
  flex       : 1;
  line-height: 1.3;
}

.csc-style-minimal .csc-item__desc {
  display   : block;
  font-size : .75rem;
  color     : var(--csc-muted);
  margin-top: 2px;
  line-height: 1.3;
}

.csc-style-minimal .csc-item__count {
  font-size    : .75rem;
  color        : var(--csc-muted);
  font-weight  : 500;
  margin-right : 2px;
  flex-shrink  : 0;
}

.csc-style-minimal .csc-item--current .csc-item__count,
.csc-style-minimal .csc-item__link:hover .csc-item__count {
  color: var(--csc-accent);
}

.csc-style-minimal .csc-item__arrow {
  width      : 14px;
  height     : 14px;
  flex-shrink: 0;
  color      : var(--csc-border);
  transition : color var(--csc-tr), transform var(--csc-tr);
}

.csc-style-minimal .csc-item__link:hover .csc-item__arrow,
.csc-style-minimal .csc-item--current .csc-item__arrow {
  color    : var(--csc-accent);
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════
   STYLE 4 — NUMBERED
   Ranked list with big two-digit number on the left.
   ══════════════════════════════════════════════════════ */
.csc-style-numbered .csc-list {
  gap: 6px;
}

.csc-style-numbered .csc-item {
  display    : flex;
  align-items: stretch;
  gap        : 0;
}

.csc-style-numbered .csc-item__num {
  flex-shrink    : 0;
  width          : 36px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : .72rem;
  font-weight    : 800;
  color          : var(--csc-accent);
  background     : rgba(var(--csc-accent-rgb, 0,115,170), .08);
  border-radius  : var(--csc-radius) 0 0 var(--csc-radius);
  letter-spacing : .03em;
  border         : 1px solid rgba(var(--csc-accent-rgb, 0,115,170), .15);
  border-right   : none;
  transition     : background var(--csc-tr);
}

.csc-style-numbered .csc-item:hover .csc-item__num,
.csc-style-numbered .csc-item--current .csc-item__num {
  background: var(--csc-accent);
  color     : #fff;
}

.csc-style-numbered .csc-item__link {
  flex           : 1;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : .5rem;
  padding        : .65rem .9rem;
  background     : var(--csc-bg);
  border         : 1px solid var(--csc-border);
  border-radius  : 0 var(--csc-radius) var(--csc-radius) 0;
  color          : var(--csc-text);
  font-size      : .875rem;
  transition     : background var(--csc-tr), border-color var(--csc-tr), color var(--csc-tr);
}

.csc-style-numbered .csc-item__link:hover {
  background   : rgba(var(--csc-accent-rgb, 0,115,170), .05);
  border-color : var(--csc-accent);
}

.csc-style-numbered .csc-item--current .csc-item__link {
  background   : rgba(var(--csc-accent-rgb, 0,115,170), .06);
  border-color : var(--csc-accent);
  color        : var(--csc-accent);
  font-weight  : 600;
}

.csc-style-numbered .csc-item__name {
  flex: 1;
  line-height: 1.3;
  transition: color var(--csc-tr);
}

.csc-style-numbered .csc-item__link:hover .csc-item__name {
  color: var(--csc-accent);
}

.csc-style-numbered .csc-item__count {
  flex-shrink    : 0;
  font-size      : .72rem;
  font-weight    : 700;
  color          : var(--csc-accent);
  background     : rgba(var(--csc-accent-rgb, 0,115,170), .1);
  padding        : 2px 7px;
  border-radius  : 100px;
  min-width      : 28px;
  text-align     : center;
}

/* ── Entrance animation ──────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .csc-item {
    opacity   : 0;
    transform : translateY(8px);
    animation : csc-in .35s ease forwards;
  }
  .csc-item:nth-child(1)  { animation-delay:.04s }
  .csc-item:nth-child(2)  { animation-delay:.08s }
  .csc-item:nth-child(3)  { animation-delay:.12s }
  .csc-item:nth-child(4)  { animation-delay:.16s }
  .csc-item:nth-child(5)  { animation-delay:.20s }
  .csc-item:nth-child(6)  { animation-delay:.24s }
  .csc-item:nth-child(7)  { animation-delay:.28s }
  .csc-item:nth-child(8)  { animation-delay:.32s }
  @keyframes csc-in { to { opacity:1; transform:translateY(0); } }

  /* Pills animate differently */
  .csc-style-pills .csc-item {
    transform: scale(.9);
    animation: csc-pill-in .3s ease forwards;
  }
  @keyframes csc-pill-in { to { opacity:1; transform:scale(1); } }
}