/* ============================================
   WAGE CATTLE — SVG Icon System
   ============================================ */

/* Base icon styles */
.site-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Navigation icons */
.nav-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  margin-right: 4px;
}

/* Ticker icons */
.ticker-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 3px;
}

/* Handbook card icons */
.handbook-card-icon .site-icon {
  width: 2rem;
  height: 2rem;
  color: #ff6b35;
}

/* Badge cow icon */
.badge-cow-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: #ff6b35;
}

/* Milestone icons */
.milestone-svg {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
}

.milestone-svg.done {
  color: #2d6a4f;
}

.milestone-svg.pending {
  color: rgba(255, 255, 255, 0.3);
}

/* Status badge icons */
.status-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  margin-right: 4px;
}

/* Tier icons */
.tier-svg {
  width: 2rem;
  height: 2rem;
}

/* Heading icons */
.heading-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  margin-right: 6px;
  color: #ff6b35;
}

/* Step icons */
.step-svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #ff6b35;
}

/* Verify card icons */
.verify-svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Brand cow */
.brand-cow {
  width: 1.8rem;
  height: 1.8rem;
  color: #ff6b35;
}

/* Button icons */
.btn-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  margin-right: 5px;
}

/* X/Twitter icon — filled, not stroked */
.site-icon[href*="x-twitter"],
use[href*="x-twitter"] ~ svg,
svg:has(use[href*="x-twitter"]) {
  fill: currentColor;
  stroke: none;
}

/* Star icon — filled */
svg:has(use[href*="icon-star"]) {
  fill: currentColor;
  stroke: none;
}

/* Hover effects on interactive icons */
a:hover .site-icon,
button:hover .site-icon {
  transform: scale(1.1);
}

/* Steak tier icon colors */
.steak-tier.rare .tier-svg { color: #cd7f32; }
.steak-tier.medium .tier-svg { color: #c0c0c0; }
.steak-tier.welldone .tier-svg { color: #ffd700; }
.steak-tier.wagyu .tier-svg { color: #ff6b35; }

/* Milestone done check — green */
.milestone.done .milestone-svg { color: #4caf50; }

/* Q1 completed section check icons */
.q1 .milestone-svg { color: #4caf50; }

/* Q2 pending section */
.q2 .milestone-svg.pending { color: rgba(255,255,255,0.25); }

/* Q3 & Q4 future */
.q3 .milestone-svg,
.q4 .milestone-svg { color: rgba(255,255,255,0.2); }