/*
 * ============================================================
 * components.css — Reusable UI pieces: buttons, cards, badges, text styles
 * ============================================================
 *
 * WHAT THIS FILE DOES:
 *   - Styles all clickable buttons (green, outline, secondary).
 *   - Styles all card panels shared across different sections.
 *   - Styles eyebrow labels, headings, and muted paragraph text.
 *   - Styles product badges (e.g. "Free Software", "Premium Offering").
 *
 * EDITING TIPS (no CSS knowledge required):
 *   - To change the green primary button color, edit .btn-primary background.
 *   - To change button shape (roundness), edit border-radius in .btn.
 *   - To change card background or border color, edit the shared card rule
 *     (the big comma-separated list that includes .product-card, .mode-card, etc.).
 *   - To change the eyebrow label color, edit .eyebrow color (default: --accent-strong).
 *   - To change heading margins or line-height, edit the shared heading rule.
 *   - To change the muted text color for descriptions, edit .hero-lead / .section-heading p.
 *
 * DEPENDENCIES:
 *   - Uses CSS variables from base.css.
 *   - These classes are used by HTML generated in app.js and by index.html.
 * ============================================================
 */

/* ── Eyebrow label (small uppercase text above headings) ──── */
.eyebrow {
  display: inline-block;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Shared heading styles ────────────────────────────────── */
.hero h1,
.section-heading h2,
.verify-box h2 {
  margin: 0 0 16px;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* ── Shared muted description text ───────────────────────── */
.hero-lead,
.section-heading p,
.info-card p,
.callout p,
.support-panel p,
.verify-box p {
  color: var(--muted);
  font-size: 1.04rem;
}

/* ── Action button rows ───────────────────────────────────── */
.hero-actions,
.connect-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ── Button base styles ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  transition: 160ms ease;
  border: 1px solid transparent;
}

/* ── Green (primary) button ───────────────────────────────── */
.btn-primary {
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #07100b;
  box-shadow: 0 14px 34px rgba(40, 217, 120, 0.22);
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* ── Outline / secondary button ──────────────────────────── */
.btn-secondary,
.btn-outline {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-secondary:hover,
.btn-outline:hover {
  background: rgba(66, 243, 154, 0.06);
  border-color: rgba(66, 243, 154, 0.24);
}

/* ── Shared card base (glass panel look) ─────────────────── */
.point-card,
.product-card,
.info-card,
.support-panel,
.callout,
.verify-box,
.link-card,
.feature-tile,
.mode-card,
.service-card,
.platform-card,
.donation-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Card inner padding ───────────────────────────────────── */
.point-card { padding: 16px; }

.product-card,
.mode-card,
.platform-card,
.donation-card {
  padding: 24px;
}

/* ── Featured card highlight border ──────────────────────── */
.product-card.featured,
.mode-card.featured,
.donation-card.featured {
  border-color: rgba(66,243,154,0.2);
}

.mode-card.featured,
.donation-card.featured {
  box-shadow: 0 24px 70px rgba(40, 217, 120, 0.12);
  position: relative;
}

/* ── Card heading and text elements ──────────────────────── */
.point-card strong,
.feature-tile strong,
.info-card h3,
.support-panel h3,
.callout h3,
.product-card h3 {
  display: block;
  margin-bottom: 6px;
}

.point-card span,
.feature-tile span {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ── Product badges (e.g. "Free Software" pill) ──────────── */
.product-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(66,243,154,0.12);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

.product-badge-alt {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* ── Spec table (key–value list inside cards) ─────────────── */
.spec-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(123,255,192,0.06);
}

.spec-list li span { color: var(--muted); }