/* ==========================================================================
 * 船联汇 VesselNexus — B1 Sidebar & Widget Styles
 * ==========================================================================
 * §1. Widget Base
 * §2. Search Widget
 * §3. Recent Posts Widget
 * §4. Categories / Archive Widget
 * §5. Tag Cloud Widget
 * §6. Calendar Widget
 * §7. RSS Widget
 * §8. Custom VNX Widgets (Market Snapshot, Quick Contact)
 *
 * 依赖: vnx-design-tokens.css
 * @package VesselNexus
 * @version 2.1.0
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §1. WIDGET BASE
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--vnx-space-6);
}

.vnx-widget {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  padding: var(--vnx-space-5);
  overflow: hidden;
}

.vnx-widget__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-base);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: 0 0 var(--vnx-space-4);
  padding-bottom: var(--vnx-space-3);
  border-bottom: 2px solid var(--vnx-ocean-600);
  position: relative;
}

/* Title accent underline */
.vnx-widget__title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--vnx-gold-500);
}

/* ── Widget List ── */
.vnx-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vnx-widget li {
  padding: var(--vnx-space-2) 0;
  border-bottom: 1px solid var(--vnx-border-light);
  font-size: var(--vnx-text-sm);
}

.vnx-widget li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vnx-widget li a {
  color: var(--vnx-text-secondary);
  text-decoration: none;
  transition: color var(--vnx-duration-fast), padding var(--vnx-duration-fast);
  display: block;
}

.vnx-widget li a:hover {
  color: var(--vnx-ocean-500);
  padding-left: var(--vnx-space-1);
}

/* ── Widget Count Badge ── */
.vnx-widget .count,
.vnx-widget .post-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-gray-100);
  color: var(--vnx-text-tertiary);
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-semibold);
  float: right;
  margin-top: -1px;
}

.vnx-widget li a:hover .count {
  background: var(--vnx-ocean-50);
  color: var(--vnx-ocean-600);
}

/* ═══════════════════════════════════════════════════════════════════════
   §2. SEARCH WIDGET
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-widget--search .vnx-widget__title {
  margin-bottom: var(--vnx-space-3);
  border-bottom: none;
  padding-bottom: 0;
}

.vnx-widget--search .vnx-widget__title::after {
  display: none;
}

.vnx-search-form {
  display: flex;
  gap: 0;
}

.vnx-search-form__input {
  flex: 1;
  height: 44px;
  padding: 0 var(--vnx-space-4);
  border: 1.5px solid var(--vnx-border-default);
  border-right: none;
  border-radius: var(--vnx-radius-md) 0 0 var(--vnx-radius-md);
  font-family: var(--vnx-font-family-body);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-primary);
  background: var(--vnx-white);
  transition: border-color var(--vnx-duration-fast);
}

.vnx-search-form__input:focus {
  outline: none;
  border-color: var(--vnx-border-focus);
}

.vnx-search-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 0 var(--vnx-radius-md) var(--vnx-radius-md) 0;
  background: var(--vnx-ocean-600);
  color: var(--vnx-white);
  cursor: pointer;
  transition: background var(--vnx-duration-fast);
}

.vnx-search-form__btn:hover {
  background: var(--vnx-ocean-500);
}

.vnx-search-form__btn svg {
  width: 18px;
  height: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
   §3. RECENT POSTS WIDGET
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-widget--recent-posts li {
  display: flex;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-3) 0;
}

.vnx-widget--recent-posts__thumb {
  width: 64px;
  height: 48px;
  border-radius: var(--vnx-radius-sm);
  background: var(--vnx-gray-100);
  overflow: hidden;
  flex-shrink: 0;
}

.vnx-widget--recent-posts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vnx-widget--recent-posts__info {
  flex: 1;
  min-width: 0;
}

.vnx-widget--recent-posts__info a {
  font-weight: var(--vnx-font-medium);
  line-height: var(--vnx-leading-snug);
  margin-bottom: 2px;
}

.vnx-widget--recent-posts__date {
  display: block;
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §4. CATEGORIES / ARCHIVES WIDGET
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-widget--categories li,
.vnx-widget--archives li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vnx-widget--categories li a,
.vnx-widget--archives li a {
  flex: 1;
}

/* ── Nested categories ── */
.vnx-widget--categories ul.children,
.vnx-widget--categories .children {
  padding-left: var(--vnx-space-4);
  border-left: 2px solid var(--vnx-border-light);
  margin-top: var(--vnx-space-1);
}

/* ═══════════════════════════════════════════════════════════════════════
   §5. TAG CLOUD WIDGET
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-widget--tag-cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vnx-space-1);
}

.vnx-widget--tag-cloud a {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-gray-100);
  color: var(--vnx-text-secondary);
  font-size: var(--vnx-text-xs) !important; /* override WP inline font-size */
  font-weight: var(--vnx-font-medium);
  text-decoration: none;
  transition: all var(--vnx-duration-fast);
}

.vnx-widget--tag-cloud a:hover {
  background: var(--vnx-ocean-100);
  color: var(--vnx-ocean-700);
}

/* ═══════════════════════════════════════════════════════════════════════
   §6. CALENDAR WIDGET
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-widget--calendar table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vnx-text-xs);
}

.vnx-widget--calendar caption {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  padding: var(--vnx-space-2);
  caption-side: top;
}

.vnx-widget--calendar th {
  padding: var(--vnx-space-1);
  text-align: center;
  color: var(--vnx-text-tertiary);
  font-weight: var(--vnx-font-medium);
  font-size: var(--vnx-text-xs);
}

.vnx-widget--calendar td {
  padding: var(--vnx-space-1);
  text-align: center;
}

.vnx-widget--calendar td a {
  display: block;
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-ocean-600);
  color: var(--vnx-white);
  font-weight: var(--vnx-font-semibold);
  text-decoration: none;
  padding: 2px 0;
}

.vnx-widget--calendar td a:hover {
  background: var(--vnx-ocean-500);
}

.vnx-widget--calendar #today {
  background: var(--vnx-gold-50);
  border-radius: var(--vnx-radius-full);
  font-weight: var(--vnx-font-bold);
}

.vnx-widget--calendar .wp-calendar-nav {
  display: flex;
  justify-content: space-between;
  padding: var(--vnx-space-2) 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   §7. RSS WIDGET
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-widget--rss .rss-widget-icon {
  display: none;
}

.vnx-widget--rss li {
  padding: var(--vnx-space-3) 0;
}

.vnx-widget--rss .rsswidget {
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  text-decoration: none;
}
.vnx-widget--rss .rsswidget:hover {
  color: var(--vnx-ocean-500);
}

.vnx-widget--rss .rss-date {
  display: block;
  margin-top: 2px;
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
}

.vnx-widget--rss .rssSummary {
  margin-top: var(--vnx-space-1);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-secondary);
  line-height: var(--vnx-leading-snug);
}

/* ═══════════════════════════════════════════════════════════════════════
   §8. CUSTOM VNX WIDGETS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Market Snapshot Widget ── */
.vnx-widget--market-snapshot .vnx-stat-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--vnx-space-2) 0;
  border-bottom: 1px solid var(--vnx-border-light);
}

.vnx-widget--market-snapshot .vnx-stat-mini:last-child {
  border-bottom: none;
}

.vnx-stat-mini__label {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-secondary);
}

.vnx-stat-mini__value {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
}

.vnx-stat-mini__value--up {
  color: var(--vnx-color-success);
}

.vnx-stat-mini__value--down {
  color: var(--vnx-color-danger);
}

/* ── Quick Contact Widget ── */
.vnx-widget--contact .vnx-contact-item {
  display: flex;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-2) 0;
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-secondary);
  line-height: var(--vnx-leading-snug);
}

.vnx-widget--contact .vnx-contact-item__icon {
  flex-shrink: 0;
  width: 18px;
  color: var(--vnx-ocean-500);
  text-align: center;
}

/* ── CTA Widget (Gold accent) ── */
.vnx-widget--cta {
  background: linear-gradient(135deg, var(--vnx-ocean-600), var(--vnx-ocean-800));
  color: var(--vnx-white);
  border: none;
  text-align: center;
  padding: var(--vnx-space-6);
}

.vnx-widget--cta .vnx-widget__title {
  color: var(--vnx-white);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  font-size: var(--vnx-text-lg);
}

.vnx-widget--cta .vnx-widget__title::after {
  background: var(--vnx-gold-400);
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
}

.vnx-widget--cta p {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-ocean-200);
  margin: 0 0 var(--vnx-space-4);
  line-height: var(--vnx-leading-normal);
}

.vnx-widget--cta .vnx-btn {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   §9. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .vnx-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vnx-space-4);
  }

  .vnx-widget--cta {
    grid-column: span 2;
  }
}

@media (max-width: 639px) {
  .vnx-sidebar {
    grid-template-columns: 1fr;
  }

  .vnx-widget--cta {
    grid-column: span 1;
  }
}