/* =========================================================
   Kawan Elite Breadcrumb System
   =========================================================
   Author: Arif / ChatGPT
   Date: 2026-05-14

   Purpose:
   This CSS controls the global styling for Rank Math breadcrumbs
   used inside GenerateBlocks layouts.

   It provides:
   - One master breadcrumb style
   - Reusable color themes using CSS variables
   - Cleaner control for normal, hover, current page, and separator colors
   - Responsive font sizing for tablet and mobile

   How to use:
   1. Add the Rank Math breadcrumb shortcode inside a text block.
   2. Wrap the text block with a GenerateBlocks container.
   3. Add this class to the inner breadcrumb container:

      breadcrumb-inner

   Example structure:

      Breadcrumb Outer Container
        Breadcrumb Inner Container: breadcrumb-inner
          Text Block: Rank Math breadcrumb shortcode

   For dark backgrounds:
   Add both classes to the breadcrumb inner container:

      breadcrumb-inner breadcrumb--dark

   How to create a new breadcrumb theme:
   1. Copy code from line 106-116
   2. Create a new modifier class using this naming pattern:
          breadcrumb--theme-name
   3. Change the colour code of your preference
   4. Add the new class beside breadcrumb-inner in GenerateBlocks:
      breadcrumb-inner breadcrumb--theme-name

   Notes:
   - Do not duplicate the full breadcrumb CSS for every new style.
   - Only create small theme blocks that change the variables.
   - Keep breadcrumb-inner as the main required class.
   ========================================================= */


/* =========================================================
   Breadcrumbs - Master
   ========================================================= */

.breadcrumb-inner {
  --ke-breadcrumb-size: 12.5px;

  --ke-breadcrumb-normal: var(--ke-ink-4);
  --ke-breadcrumb-hover: var(--ke-green);
  --ke-breadcrumb-current: var(--ke-ink-2);
  --ke-breadcrumb-separator: var(--ke-ink-4);

  font-size: var(--ke-breadcrumb-size);
  color: var(--ke-breadcrumb-normal);
}

.breadcrumb-inner .rank-math-breadcrumb,
.breadcrumb-inner .rank-math-breadcrumb p {
  font-size: inherit;
  color: inherit;
  margin: 0;
}

.breadcrumb-inner a,
.breadcrumb-inner .rank-math-breadcrumb a {
  font-size: inherit;
  font-weight: 500;
  color: var(--ke-breadcrumb-normal);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-inner a:hover,
.breadcrumb-inner .rank-math-breadcrumb a:hover {
  color: var(--ke-breadcrumb-hover);
}

/* Current page */
.breadcrumb-inner .last,
.breadcrumb-inner .rank-math-breadcrumb .last,
.breadcrumb-inner .rank-math-breadcrumb span:last-child {
  font-size: inherit;
  font-weight: 600;
  color: var(--ke-breadcrumb-current);
}

/* Separator */
.breadcrumb-inner .separator,
.breadcrumb-inner .rank-math-breadcrumb .separator {
  color: var(--ke-breadcrumb-separator);
  font-weight: 500;
  margin-left: 6px;
  margin-right: 6px;
}


/* =========================================================
   Breadcrumbs - Dark Background Theme
   ========================================================= */

.breadcrumb-inner.breadcrumb--dark,
.breadcrumb--dark .breadcrumb-inner {
  --ke-breadcrumb-normal: rgba(255, 255, 255, 0.35);
  --ke-breadcrumb-hover: rgba(255, 255, 255, 0.65);
  --ke-breadcrumb-current: rgba(255, 255, 255, 0.55);
  --ke-breadcrumb-separator: rgba(255, 255, 255, 0.2);
}


/* =========================================================
   Breadcrumbs - Responsive Sizing
   ========================================================= */

/* Tablet */
@media (max-width: 1024px) {
  .breadcrumb-inner {
    --ke-breadcrumb-size: 12px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .breadcrumb-inner {
    --ke-breadcrumb-size: 12px;
  }
}