/**
 * Strong & Emphasis Fix
 * Ensures <strong> and <b> elements remain visually distinct inside any text block.
 * Should be placed in k2-typography.css
 */

strong,
b {
  font-weight: var(--k2-font-weight-semibold, 600); /* fallback for consistency */
  color: inherit; /* maintain contextual text color */
}

/* Slightly stronger emphasis for nested strong tags <strong><strong>test</strong></strong> */
strong strong {
  font-weight: var(--k2-font-weight-bold, 700);
}

em,
i {
  font-style: italic;
  color: inherit;
}

.k2-text-italic {
  font-style: italic !important;
}
.k2-text-underline {
  text-decoration: underline !important;
}
.k2-text-uppercase {
  text-transform: uppercase !important;
}

/* =========================================
   K2 Table Utilities
   ========================================= */
.k2-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: var(--k2-font-size-base);
  line-height: 1.6;
}

.k2-table th,
.k2-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--k2-border-color, #e0e0e0);
  text-align: left;
  vertical-align: top;
}

.k2-table th {
  font-weight: 600;
  background-color: var(--k2-surface-alt, #fafafa);
  color: var(--k2-text-strong, #111);
}

.k2-table tr:last-child td {
  border-bottom: none;
}

/* Striped variant */
.k2-table-striped tbody tr:nth-child(odd) {
  background-color: var(--k2-surface-muted, #f9f9f9);
}

/* Responsive scroll wrapper */
.k2-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==============================================
   EYEBROW TEXT UTILITY
   ------------------------------------------------
   🔹 Summary:
   The `.k2-eyebrow` class styles short, uppercase
   label text typically placed above section headings
   or card titles — often used to introduce a category,
   context, or tag line (e.g., “Featured Course”, “New”, 
   “Announcement”, etc.).

   🔹 Features:
   - Small uppercase text for visual hierarchy
   - Slight letter-spacing for readability
   - Muted text color for subtle emphasis
   - Consistent vertical rhythm before headings

   🔹 Usage Example:
     <div class="k2-eyebrow">Featured Program</div>
     <h2 class="k2-heading-xl">AI & Fullstack Masterclass</h2>

   🔹 Best Practices:
   - Use only for short label-like text (1–3 words).
   - Avoid applying to body paragraphs or long phrases.
   - Can be combined with `.k2-text-gradient` for accent effect.
   ============================================== */
.k2-eyebrow {
  display: block;
  font-size: var(--k2-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--k2-color-text-muted);
  margin-bottom: var(--k2-space-xs);
}



/**
 * ==========================================================================
 * K2 Typography Utilities → List Variants
 * ==========================================================================
 * 
 * A collection of list-style utilities to provide modern, flexible options
 * for bullet lists across various use cases — from content-heavy pages 
 * to elegant feature sections.
 * 
 * Usage Example:
 * --------------------------------------------------------------------------
 * <ul class="k2-list k2-list-disc">...</ul>
 * <ul class="k2-list k2-list-circle">...</ul>
 * <ul class="k2-list k2-list-dash">...</ul>
 * <ul class="k2-list k2-list-check">...</ul>
 * <ul class="k2-list k2-list-arrow">...</ul>
 * 
 * Notes:
 * - All variants build upon `.k2-list` base class.
 * - Icon-based bullets use CSS pseudo-elements for clean alignment.
 * - Designed to be theme-friendly (colors use CSS vars).
 * ==========================================================================
 */

/* Base list normalization */
.k2-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: none;
  line-height: 1.6;
  color: var(--k2-text-body);
}

/* Classic bullet */
.k2-list-disc {
  list-style: disc;
  padding-left: 1.5rem;
}

/* Circle bullets */
.k2-list-circle {
  list-style: circle;
  padding-left: 1.5rem;
}

/* Dash style — minimal and trendy */
.k2-list-dash li::before {
  content: "–";
  color: var(--k2-text-muted);
  display: inline-block;
  width: 1rem;
  margin-left: -1rem;
}

/* Checkmark style — popular for feature highlights */
.k2-list-check li {
  position: relative;
  padding-left: 1.5rem;
}
.k2-list-check li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--k2-success, #16a34a);
  font-weight: 600;
}

/* Arrow style — good for “steps” or “guides” */
.k2-list-arrow li {
  position: relative;
  padding-left: 1.5rem;
}
.k2-list-arrow li::before {
  content: "➤";
  position: absolute;
  left: 0;
  color: var(--k2-primary, #2563eb);
  font-size: 0.9em;
}

/* Subtle divider option (for formal content or data lists) */
.k2-list-divider li {
  border-bottom: 1px solid var(--k2-border-subtle);
  padding: 0.5rem 0;
}
.k2-list-divider li:last-child {
  border-bottom: none;
}