/* Generated using nucleoapp.com */
/* Restyled for PMCoach — inspired by the PMCoach brand identity */

/* --------------------------------

Color palette (from PMCoach logo)

  Primary orange:    #FF9012  (checkmark & "PMCoach" wordmark)
  Deep orange:       #E67300  (darker shade for depth/hover states)
  Light orange:      #FFC373  (soft accent tint)
  Charcoal:          #3F3F3F  (registered trademark mark, neutral text)
  White:             #ffffff  (contrast on dark/orange backgrounds)

-------------------------------- */

/* --------------------------------

Icon colors

-------------------------------- */

.icon {
  display: inline-block;
  /* icon primary color — PMCoach orange */
  color: #FF9012;
  height: 1em;
  width: 1em;
}

.icon use {
  /* icon secondary color - fill — PMCoach charcoal */
  fill: #3F3F3F;
}

.icon.icon-outline use {
  /* icon secondary color - stroke — PMCoach charcoal */
  stroke: #3F3F3F;
}

/* --------------------------------

Change icon size

-------------------------------- */

.icon-xs {
  height: 0.5em;
  width: 0.5em;
}

.icon-sm {
  height: 0.8em;
  width: 0.8em;
}

.icon-lg {
  height: 1.6em;
  width: 1.6em;
}

.icon-xl {
  height: 2em;
  width: 2em;
}

/* --------------------------------

Align icon and text

-------------------------------- */

.icon-text-aligner {
  /* add this class to parent element that contains icon + text */
  display: flex;
  align-items: center;
}

.icon-text-aligner .icon {
  color: inherit;
  margin-right: 0.4em;
}

.icon-text-aligner .icon use {
  color: inherit;
  fill: currentColor;
}

.icon-text-aligner .icon.icon-outline use {
  stroke: currentColor;
}

/* --------------------------------

Icon reset values - used to enable color customizations

-------------------------------- */

.icon {
  fill: currentColor;
  stroke: none;
}

.icon.icon-outline {
  fill: none;
  stroke: currentColor;
}

.icon use {
  stroke: none;
}

.icon.icon-outline use {
  fill: none;
}

/* --------------------------------

Stroke effects - Nucleo outline icons

- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
- 24px, 32px icons -> up to 2px stroke
- 48px, 64px icons -> up to 4px stroke

-------------------------------- */

.icon-outline.icon-stroke-1 {
  stroke-width: 1px;
}

.icon-outline.icon-stroke-2 {
  stroke-width: 2px;
}

.icon-outline.icon-stroke-3 {
  stroke-width: 3px;
}

.icon-outline.icon-stroke-4 {
  stroke-width: 4px;
}

.icon-outline.icon-stroke-1 use,
.icon-outline.icon-stroke-3 use {
  -webkit-transform: translateX(0.5px) translateY(0.5px);
  -moz-transform: translateX(0.5px) translateY(0.5px);
  -ms-transform: translateX(0.5px) translateY(0.5px);
  -o-transform: translateX(0.5px) translateY(0.5px);
  transform: translateX(0.5px) translateY(0.5px);
}

/* --------------------------------

PMCoach brand color variants
Use these modifier classes alongside .icon to apply
specific brand tones from the PMCoach palette.

-------------------------------- */

/* Primary orange — main brand color */
.icon-pmcoach-primary {
  color: #FF9012;
}

.icon-pmcoach-primary use {
  fill: #E67300;
}

.icon-pmcoach-primary.icon-outline use {
  stroke: #E67300;
}

/* Deep orange — darker, high-contrast variant */
.icon-pmcoach-deep {
  color: #E67300;
}

.icon-pmcoach-deep use {
  fill: #FF9012;
}

.icon-pmcoach-deep.icon-outline use {
  stroke: #FF9012;
}

/* Light orange — soft accent tint */
.icon-pmcoach-light {
  color: #FFC373;
}

.icon-pmcoach-light use {
  fill: #FF9012;
}

.icon-pmcoach-light.icon-outline use {
  stroke: #FF9012;
}

/* Charcoal — neutral brand tone */
.icon-pmcoach-charcoal {
  color: #3F3F3F;
}

.icon-pmcoach-charcoal use {
  fill: #FF9012;
}

.icon-pmcoach-charcoal.icon-outline use {
  stroke: #FF9012;
}

/* White — for use on dark/orange backgrounds */
.icon-pmcoach-white {
  color: #ffffff;
}

.icon-pmcoach-white use {
  fill: rgba(255, 255, 255, 0.75);
}

.icon-pmcoach-white.icon-outline use {
  stroke: rgba(255, 255, 255, 0.75);
}