/* ============================================================
   CiCC Theme 4.0 — Typography & Fluid Type
   Layer: base/typography
   ============================================================ */

@layer base {
  /* ── Fluid Hero Heading ── */
  .hero-title {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--cicc-white);
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  .hero-subtitle {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Section Title ── */
  .section-title {
    font-size: var(--text-h2);
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    line-height: 1.15;
  }

  .section-title--light {
    color: var(--cicc-white);
  }

  .section-desc {
    font-size: var(--text-lg);
    color: var(--gray-500);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
  }

  .section-desc--light {
    color: rgba(255,255,255,0.75);
  }

  /* ── Section Tag (Pill) ── */
  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 18px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--cicc-blue-100);
    color: var(--cicc-blue);
    margin-bottom: var(--space-4);
  }

  .section-tag--light {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.2);
  }

  /* ── Badge ── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
  }

  .badge--blue   { background: var(--cicc-blue-100); color: var(--cicc-blue); }
  .badge--green  { background: var(--cicc-green-100); color: var(--cicc-green); }
  .badge--orange { background: var(--cicc-orange-100); color: var(--cicc-orange); }
  .badge--red    { background: var(--cicc-red-100); color: var(--cicc-red); }
  .badge--gray   { background: var(--gray-100); color: var(--gray-600); }
  .badge--purple { background: #f3e8ff; color: var(--cicc-purple); }

  /* ── Stat Number ── */
  .stat-number {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1;
    color: var(--cicc-white);
  }

  .stat-number--sm {
    font-size: var(--text-2xl);
  }

  .stat-number--lg {
    font-size: var(--text-5xl);
  }

  .stat-label {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.65);
    margin-top: var(--space-1);
    display: block;
  }

  /* ── Card Title ── */
  .card-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.35;
  }

  .card-desc {
    font-size: var(--text-sm);
    color: var(--gray-500);
    line-height: 1.6;
  }

  /* ── Link with arrow ── */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--cicc-blue);
    transition: gap var(--transition-base);
  }
  .link-arrow:hover {
    gap: 10px;
    color: var(--cicc-blue-600);
  }

  /* ── Small / Meta ── */
  .text-meta {
    font-size: var(--text-xs);
    color: var(--gray-400);
    line-height: 1.5;
  }

  /* ── Price ── */
  .price {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--cicc-blue);
    line-height: 1;
  }

  .price del {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--gray-400);
    text-decoration: line-through;
    margin-left: var(--space-2);
  }

  /* ── Entry Content (Post/Page body) ── */
  .entry-content {
    color: var(--gray-800);
    line-height: 1.8;
  }
  .entry-content p {
    color: var(--gray-700);
    margin-bottom: 1.2em;
  }

  /* ── Override Divi inline white text ── */
  .entry-content p,
  .entry-content span,
  .entry-content div,
  .entry-content li {
    color: var(--gray-700) !important;
  }
  .entry-content h1, .entry-content h2,
  .entry-content h3, .entry-content h4,
  .entry-content h5, .entry-content h6 {
    color: var(--gray-900) !important;
  }

  /* Undo Divi anti-copy / invisible text */
  .entry-content * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
  }

  /* ── Blockquote ── */
  blockquote {
    border-left: 4px solid var(--cicc-blue);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-8) 0;
    background: var(--gray-50);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-style: italic;
    color: var(--gray-600);
  }
}