/**
 * Onkoloogika - Heading with Icon Styles
 *
 * Usage in Gutenberg:
 * 1. Select a Heading block
 * 2. In Styles panel, choose "Onkoloogika – pealkiri ikooniga"
 * 3. In Advanced > Additional CSS class, add:
 *    - Icon class: onk-icon-heart, onk-icon-users, etc.
 *    - Color class: onk-heading-color-lilac, onk-heading-color-peach, etc.
 *
 * Example: "onk-icon-heart onk-heading-color-lilac"
 */

/* =========================================
   Base heading-with-icon layout
   Applied via Heading block style: onk-heading-with-icon
   ========================================= */

.wp-block-heading.is-style-onk-heading-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pseudo-element for the icon */
.wp-block-heading.is-style-onk-heading-with-icon::before {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  min-width: 1.25em;
  flex-shrink: 0;

  /* Use CSS vars so color/asset can be swapped via utility classes */
  background-color: var(--onk-heading-icon-color, currentColor);
  -webkit-mask-image: var(--onk-heading-icon-url);
  mask-image: var(--onk-heading-icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Hide ::before if no icon class is set (no mask = invisible) */
.wp-block-heading.is-style-onk-heading-with-icon:not([class*="onk-icon-"])::before {
  display: none;
}



/* =========================================
   Icon utilities (Heroicons Outline)
   Add ONE of these classes via "Additional CSS class"
   ========================================= */

.onk-icon-heart::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/heart.svg");
}

.onk-icon-users::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/users.svg");
}

.onk-icon-chat::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/chat-bubble-left-right.svg");
}

.onk-icon-sparkles::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/sparkles.svg");
}

.onk-icon-star::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/star.svg");
}

.onk-icon-check::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/check-circle.svg");
}

.onk-icon-lightbulb::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/light-bulb.svg");
}

.onk-icon-calendar::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/calendar.svg");
}

.onk-icon-microphone::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/microphone.svg");
}

.onk-icon-video::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/video-camera.svg");
}

.onk-icon-hand::before {
  --onk-heading-icon-url: url("../icons/heroicons/outline/hand-raised.svg");
}


/* =========================================
   Color utilities
   These reuse the same accent palette as surfaces
   ========================================= */

/* Lilac / Purple */
.onk-heading-color-lilac {
  --onk-heading-icon-color: #9c45ff;
}

/* Peach / Orange */
.onk-heading-color-peach {
  --onk-heading-icon-color: #ff8b3d;
}

/* Blue */
.onk-heading-color-blue {
  --onk-heading-icon-color: #2c7be5;
}

/* Mint / Green */
.onk-heading-color-mint {
  --onk-heading-icon-color: #18a566;
}

/* Neutral purple (default brand) */
.onk-heading-color-neutral {
  --onk-heading-icon-color: #7c3aed;
}


/* =========================================
   Available classes reference:

   ICONS:
   - onk-icon-heart
   - onk-icon-users
   - onk-icon-chat
   - onk-icon-sparkles
   - onk-icon-star
   - onk-icon-check
   - onk-icon-lightbulb
   - onk-icon-calendar
   - onk-icon-microphone
   - onk-icon-video
   - onk-icon-hand

   COLORS:
   - onk-heading-color-lilac   (#9c45ff)
   - onk-heading-color-peach   (#ff8b3d)
   - onk-heading-color-blue    (#2c7be5)
   - onk-heading-color-mint    (#18a566)
   - onk-heading-color-neutral (#7c3aed)
   ========================================= */