/* ==========================================================================
   Bonaventure Portfolio — bv-list.css
   BV List widget (icon + numbered modes). Flush Nexcess Edge CDN after updating.
   ========================================================================== */

:root {
  --bvl-gold:       #DCB064;
  --bvl-gold-lt:    #e8c882;
  --bvl-charcoal:   #26262D;
  --bvl-white:      #ffffff;
  --bvl-serif:      "scotch-text", "Playfair Display", Georgia, serif;
  --bvl-sans:       "rival-sans",  "Jost", system-ui, sans-serif;
  --bvl-transition: 0.25s ease;
}

/* ── List container ───────────────────────────────────────────────────────── */
/* display:flex + flex-direction:column is what makes gap: work on list items */
.bvl-list {
  list-style:      none;
  margin:          0;
  padding:         0;
  width:           100%;
  display:         flex;
  flex-direction:  column;
  gap:             0;         /* overridden by Elementor item_gap selector */
}

/* ── Item ─────────────────────────────────────────────────────────────────── */
.bvl-item {
  display:     flex;
  align-items: flex-start;
  gap:         14px;         /* overridden by Elementor badge_gap selector */
  padding:     14px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.bvl-list .bvl-item:first-child {
  /* border-top colour/width set via Elementor divider controls */
}

.bvl-no-dividers .bvl-item {
  border-top:    none !important;
  border-bottom: none !important;
}

/* ── Item link wrapper ────────────────────────────────────────────────────── */
.bvl-item-link {
  display:         flex;
  align-items:     inherit;
  gap:             inherit;
  text-decoration: none;
  width:           100%;
  transition:      background-color var(--bvl-transition);
}

/* ── Badge ────────────────────────────────────────────────────────────────── */
.bvl-badge {
  width:           36px;
  height:          36px;
  min-width:       36px;
  flex-shrink:     0;
  border-radius:   50%;
  background:      rgba(220,176,100,.12);
  color:           var(--bvl-gold);
  font-size:       15px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
  transition:      background-color var(--bvl-transition),
                   color            var(--bvl-transition);
}

/* Font icons (FA / Eicons) inside badge — inherit colour from badge.
   fill is intentionally NOT set here so FA solid/brand icons keep their fill. */
.bvl-badge i {
  font-size:   inherit;
  color:       inherit;
  line-height: 1;
  transition:  color var(--bvl-transition);
}

/* FA / Eicons rendered as inline SVG (Elementor "Inline SVG" mode).
   These are font-library icons — preserve fill, don't stroke them. */
.bvl-badge--picker:not(.bvl-badge--svg) svg {
  width:       18px;
  height:      18px;
  flex-shrink: 0;
  fill:        currentColor;
}

/* Uploaded SVG files inside badge — force stroke rendering, strip fill.
   Only .bvl-badge--svg gets this treatment (set in PHP when library === 'svg'). */
.bvl-badge--svg svg {
  width:        18px;
  height:       18px;
  flex-shrink:  0;
  transition:   stroke var(--bvl-transition);
}

.bvl-badge--svg svg path,
.bvl-badge--svg svg circle,
.bvl-badge--svg svg rect,
.bvl-badge--svg svg line,
.bvl-badge--svg svg polyline,
.bvl-badge--svg svg polygon {
  stroke:       var(--bvl-gold);
  stroke-width: 1.5;
  fill:         none;
  transition:   stroke var(--bvl-transition);
}

.bvl-badge--number {
  font-family: var(--bvl-sans);
  font-weight: 700;
  font-size:   13px;
}

/* ── Content ──────────────────────────────────────────────────────────────── */
.bvl-content {
  flex:      1;
  min-width: 0;   /* prevents long words blowing out the flex layout */
}

/* ── Title ────────────────────────────────────────────────────────────────── */
.bvl-title {
  font-family:   var(--bvl-sans);
  font-size:     14px;
  font-weight:   600;
  color:         var(--bvl-white);
  display:       block;
  margin-top:    0;         /* reset theme heading margins */
  margin-bottom: 4px;
  line-height:   1.3;
  transition:    color var(--bvl-transition);
}

/* ── Description ──────────────────────────────────────────────────────────── */
.bvl-desc {
  font-family: var(--bvl-sans);
  font-size:   14px;
  color:       var(--bvl-white);
  line-height: 1.6;
}

.bvl-desc p { margin: 0; }
.bvl-desc p + p { margin-top: 8px; }

.bvl-desc a {
  color:           var(--bvl-gold);
  text-decoration: none;
  transition:      color var(--bvl-transition);
}

.bvl-desc a:hover {
  color:           var(--bvl-gold-lt);
  text-decoration: underline;
}

.bvl-desc small,
.bvl-desc .bvl-muted {
  font-size: 12px;
  color:     rgba(255,255,255,.4);
}

/* ── Linked item hover ────────────────────────────────────────────────────── */
.bvl-item--linked {
  cursor:     pointer;
  transition: background-color var(--bvl-transition);
  border-radius: 4px;
}

.bvl-item--linked:hover .bvl-badge {
  background-color: rgba(220,176,100,.22);
}

.bvl-item--linked:hover .bvl-title {
  color: var(--bvl-gold);
}

/* ── Numbered mode ────────────────────────────────────────────────────────── */
.bvl-mode-numbered .bvl-badge {
  background:  var(--bvl-gold);
  color:       var(--bvl-charcoal);
  font-weight: 700;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.bvl-empty {
  font-family: var(--bvl-sans);
  font-size:   14px;
  color:       rgba(255,255,255,.4);
  padding:     16px 0;
}

/* ── Touch devices — disable hover effects that don't fire reliably ───────── */
@media (hover: none) {
  .bvl-item--linked:hover .bvl-badge  { background-color: rgba(220,176,100,.12); }
  .bvl-item--linked:hover .bvl-title  { color: var(--bvl-white); }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .bvl-badge { width: 30px; height: 30px; min-width: 30px; font-size: 13px; }
  .bvl-title { font-size: 13px; }
  .bvl-desc  { font-size: 13px; }
}