/* ================================================
   SKILLS PROGRESS BARS SHORTCODES
   Shortcodes: [skills_progress], [skills_circles]
   ================================================ */

.skills-progress,
.skills-circles {
  --skills-progress-height: 10px;
  --skills-progress-mobile-height: var(--skills-progress-height);
  --skills-progress-small-mobile-height: var(--skills-progress-mobile-height);
  --skills-progress-track-color: rgba(255,255,255,0.12);
  --skills-progress-font-family: "FuturaPT", "Futura PT", Futura, system-ui, sans-serif;
  --skills-progress-font-size: 11px;
  --skills-progress-font-weight: 200;
  --skills-progress-letter-spacing: 0.16em;

  /* Independent typography controls.
     Set these from the shortcode wrapper inline style when needed. */
  --skills-progress-label-font-size: var(--skills-progress-font-size);
  --skills-progress-label-text-transform: capitalize;
  --skills-circle-label-font-size: var(--skills-progress-font-size);
  --skills-circle-label-text-transform: capitalize;
  --skills-circle-number-font-size: 22px;
  --skills-circle-number-text-transform: none;
}

/* ================================================
   STRAIGHT SKILLS PROGRESS BARS
   ================================================ */

.skills-progress {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3.5vw, 45px);
  row-gap: 28px;
  box-sizing: border-box;
}

.skills-progress__item {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 14px;
  box-sizing: border-box;
}

.skills-progress__label,
.skills-circle__label,
.skills-circle__number {
  font-family: var(--skills-progress-font-family);
  font-weight: var(--skills-progress-font-weight);
  line-height: 1.2;
  letter-spacing: var(--skills-progress-letter-spacing);
  color: #ffffff;
}

.skills-progress__label {
  font-size: var(--skills-progress-label-font-size);
  text-transform: var(--skills-progress-label-text-transform);
}

.skills-circle__label {
  font-size: var(--skills-circle-label-font-size);
  text-transform: var(--skills-circle-label-text-transform);
}

.skills-circle__number {
  font-size: var(--skills-circle-number-font-size);
  text-transform: var(--skills-circle-number-text-transform);
  font-weight: 400;
}

.skills-progress__item.is-odd {
  text-align: right;
  justify-items: end;
}

.skills-progress__item.is-even {
  text-align: left;
  justify-items: start;
}

/* Base straight progress bar. Also keeps the old [progress_bar] shortcode working. */
.progress-bar {
  --progress-color: #648e97;
  --progress-height: var(--skills-progress-height, 10px);
  --progress-mobile-height: var(--skills-progress-mobile-height, var(--progress-height));
  --progress-small-mobile-height: var(--skills-progress-small-mobile-height, var(--progress-mobile-height));

  width: var(--skills-progress-bar-width, 100%);
  max-width: 100%;
  height: var(--progress-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--skills-progress-track-color, rgba(255,255,255,0.12));
  box-sizing: border-box;
}

.progress-bar__value {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--progress-color);
  transition: width 1.5s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: width;
}

/* Desktop: odd items = left column, text right, animation right to left. */
.progress-bar.is-reverse {
  flex-direction: row-reverse;
}

/* ================================================
   CIRCULAR SKILLS PROGRESS BARS
   ================================================ */

.skills-circles {
  --skills-circle-size: 120px;
  --skills-circle-mobile-size: 88px;
  --skills-circle-small-mobile-size: var(--skills-circle-mobile-size);

  --skills-circle-gap: clamp(16px, 3vw, 40px);
  --skills-circle-columns: var(--skills-circle-desktop-columns, 5);

  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 34px var(--skills-circle-gap);
  box-sizing: border-box;
}

.skills-circle {
  --progress-color: #648e97;

  min-width: 0;
  width: calc((100% - ((var(--skills-circle-columns) - 1) * var(--skills-circle-gap))) / var(--skills-circle-columns));
  max-width: calc((100% - ((var(--skills-circle-columns) - 1) * var(--skills-circle-gap))) / var(--skills-circle-columns));
  flex: 0 1 calc((100% - ((var(--skills-circle-columns) - 1) * var(--skills-circle-gap))) / var(--skills-circle-columns));
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  box-sizing: border-box;
}

.skills-circle__visual {
  position: relative;
  width: var(--skills-circle-size);
  height: var(--skills-circle-size);
  display: grid;
  place-items: center;
}

.skills-circle__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: rotate(-90deg);
}

.skills-circle__track,
.skills-circle__value,
.skills-circle__bevel {
  fill: none;
  stroke-width: var(--skills-progress-height, 10px);
  stroke-linecap: round;
}

.skills-circle__track {
  stroke: var(--skills-progress-track-color, rgba(255,255,255,0.12));
}

.skills-circle__value,
.skills-circle__bevel {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: stroke-dashoffset;
}

.skills-circle__value {
  stroke: var(--progress-color);
}

.skills-circle__bevel {
  opacity: 0;
  pointer-events: none;
}

.skills-circle__number {
  position: relative;
  z-index: 1;
  max-width: calc(var(--skills-circle-size) * 0.72);
  text-align: center;
  overflow-wrap: anywhere;
  letter-spacing: 0.08em;
  line-height: 1.08;
}

.skills-circle__label {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar__value,
  .skills-circle__value,
  .skills-circle__bevel {
    transition: none;
  }
}

/* ------------ MOBILE ADJUSTMENTS FOR SKILLS PROGRESS BARS ------------ */
@media (max-width: 768px) {
  .skills-progress {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }

  .progress-bar {
    width: var(--skills-progress-bar-mobile-width, var(--skills-progress-bar-width, 100%));
    height: var(--progress-mobile-height, var(--progress-height));
  }

  .skills-progress__item,
  .skills-progress__item.is-odd,
  .skills-progress__item.is-even {
    text-align: left;
    justify-items: start;
  }

  .progress-bar.is-reverse {
    flex-direction: row;
  }

  .skills-circles {
    --skills-circle-gap: 12px;
    --skills-circle-columns: var(--skills-circle-mobile-columns, 3);
    gap: 24px var(--skills-circle-gap);
  }

  .skills-circle__visual {
    width: var(--skills-circle-mobile-size);
    height: var(--skills-circle-mobile-size);
  }

  .skills-circle__track,
  .skills-circle__value,
  .skills-circle__bevel {
    stroke-width: var(--skills-progress-mobile-height, var(--skills-progress-height, 10px));
  }

  .skills-circles.has-bevel:not(.has-glow) .skills-circle__bevel-shadow,
  .skills-circle.has-bevel:not(.has-glow) .skills-circle__bevel-shadow {
    stroke-width: var(--skills-circle-mobile-shadow-width, var(--skills-circle-bevel-shadow-width, 12px));
  }

  .skills-circles.has-bevel:not(.has-glow) .skills-circle__bevel-highlight,
  .skills-circle.has-bevel:not(.has-glow) .skills-circle__bevel-highlight {
    stroke-width: var(--skills-circle-mobile-highlight-width, var(--skills-circle-bevel-highlight-width, 3px));
  }

  .skills-circle__number {
    max-width: calc(var(--skills-circle-mobile-size) * 0.72);
    font-size: var(--skills-circle-number-mobile-font-size, var(--skills-circle-number-font-size));
  }

  .skills-circle__label {
    font-size: var(--skills-circle-label-mobile-font-size, var(--skills-circle-label-font-size));
    letter-spacing: 0.12em;
  }

  .skills-progress__label {
    font-size: var(--skills-progress-label-mobile-font-size, var(--skills-progress-label-font-size));
  }
}



/* ------------ SMALL MOBILE ADJUSTMENTS FOR SKILLS PROGRESS BARS ------------ */
@media (max-width: 430px) {
  .progress-bar {
    height: var(--progress-small-mobile-height, var(--progress-mobile-height, var(--progress-height)));
  }

  .skills-circle__visual {
    width: var(--skills-circle-small-mobile-size, var(--skills-circle-mobile-size));
    height: var(--skills-circle-small-mobile-size, var(--skills-circle-mobile-size));
  }

  .skills-circle__track,
  .skills-circle__value,
  .skills-circle__bevel {
    stroke-width: var(--skills-progress-small-mobile-height, var(--skills-progress-mobile-height, var(--skills-progress-height, 10px)));
  }

  .skills-circles.has-bevel:not(.has-glow) .skills-circle__bevel-shadow,
  .skills-circle.has-bevel:not(.has-glow) .skills-circle__bevel-shadow {
    stroke-width: var(--skills-circle-small-mobile-shadow-width, var(--skills-circle-mobile-shadow-width, var(--skills-circle-bevel-shadow-width, 12px)));
  }

  .skills-circles.has-bevel:not(.has-glow) .skills-circle__bevel-highlight,
  .skills-circle.has-bevel:not(.has-glow) .skills-circle__bevel-highlight {
    stroke-width: var(--skills-circle-small-mobile-highlight-width, var(--skills-circle-mobile-highlight-width, var(--skills-circle-bevel-highlight-width, 3px)));
  }

  .skills-circle__number {
    max-width: calc(var(--skills-circle-small-mobile-size, var(--skills-circle-mobile-size)) * 0.72);
  }
}

/* ================================================
   OPTIONAL SIMPLE BEVEL STYLE
   Activate with bevel="true" on [skills_progress], [skills_circles], or [progress_bar].
   This affects only the colored percentage/progress part, leaving the track flat.
   If glow="true" is also used, the stronger glow style takes over.
   ================================================ */

.skills-progress.has-bevel:not(.has-glow) .progress-bar__value,
.progress-bar.has-bevel:not(.has-glow) .progress-bar__value {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 36%, rgba(0,0,0,0.12) 100%),
    var(--progress-color);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.26),
    inset 0 -1px 1px rgba(0,0,0,0.22);
}

.skills-progress.has-bevel:not(.has-glow) .progress-bar__value::after,
.progress-bar.has-bevel:not(.has-glow) .progress-bar__value::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 48%, rgba(255,255,255,0) 78%);
  pointer-events: none;
}

.skills-circles.has-bevel:not(.has-glow) .skills-circle__value,
.skills-circle.has-bevel:not(.has-glow) .skills-circle__value {
  stroke: var(--progress-color);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.22));
}

.skills-circles.has-bevel:not(.has-glow) .skills-circle__bevel,
.skills-circle.has-bevel:not(.has-glow) .skills-circle__bevel {
  opacity: 1;
}

/* SVG strokes do not reliably render calc(var() * n) in every browser.
   These explicit CSS variables make the circular bevel visible and scalable. */
.skills-circles.has-bevel:not(.has-glow) .skills-circle__bevel-shadow,
.skills-circle.has-bevel:not(.has-glow) .skills-circle__bevel-shadow {
  stroke: rgba(0,0,0,0.42);
  stroke-width: var(--skills-circle-bevel-shadow-width, 12px);
  transform: translate(1px, 1px);
  filter: blur(0.15px);
}

.skills-circles.has-bevel:not(.has-glow) .skills-circle__bevel-highlight,
.skills-circle.has-bevel:not(.has-glow) .skills-circle__bevel-highlight {
  stroke: rgba(255,255,255,0.58);
  stroke-width: var(--skills-circle-bevel-highlight-width, 3px);
  transform: translate(-1px, -1px);
  filter: blur(0.05px);
}

/* ================================================
   OPTIONAL NEON / BEVELED STYLE
   Activate with glow="true" on [skills_progress], [skills_circles], or [progress_bar].
   Flat style stays unchanged when glow is omitted.
   ================================================ */

.skills-progress.has-glow,
.skills-circles.has-glow,
.progress-bar.has-glow {
  --skills-glow-track-top: #333333;
  --skills-glow-track-bottom: #111111;
  --skills-glow-track-border: rgba(255,255,255,0.09);
  --skills-glow-track-highlight: rgba(255,255,255,0.14);
  --skills-glow-track-shadow: rgba(0,0,0,0.65);
}

.skills-progress.has-glow .progress-bar,
.progress-bar.has-glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.45)),
    linear-gradient(180deg, var(--skills-glow-track-top), var(--skills-glow-track-bottom));
  border: 1px solid var(--skills-glow-track-border);
  box-shadow:
    inset 0 1px 1px var(--skills-glow-track-highlight),
    inset 0 -2px 3px var(--skills-glow-track-shadow),
    0 1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.30),
    0 0 8px color-mix(in srgb, var(--progress-color) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--progress-color) 13%, transparent);
}

.skills-progress.has-glow .progress-bar__value,
.progress-bar.has-glow .progress-bar__value {
  position: relative;
  overflow: hidden;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.13) 32%, rgba(0,0,0,0.10) 100%),
    var(--progress-color);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.34),
    inset 0 -1px 2px rgba(0,0,0,0.28),
    0 0 6px color-mix(in srgb, var(--progress-color) 56%, transparent),
    0 0 16px color-mix(in srgb, var(--progress-color) 30%, transparent);
}

.skills-progress.has-glow .progress-bar__value::after,
.progress-bar.has-glow .progress-bar__value::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06) 42%, rgba(255,255,255,0) 75%);
  pointer-events: none;
}

.skills-circles.has-glow .skills-circle__visual,
.skills-circle.has-glow .skills-circle__visual {
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,0.34))
    drop-shadow(0 0 10px color-mix(in srgb, var(--progress-color) 16%, transparent));
}

.skills-circles.has-glow .skills-circle__track,
.skills-circle.has-glow .skills-circle__track {
  stroke: #1d1d1d;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.08))
    drop-shadow(0 -1px 1px rgba(0,0,0,0.55));
}

.skills-circles.has-glow .skills-circle__value,
.skills-circle.has-glow .skills-circle__value {
  stroke: var(--progress-color);
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--progress-color) 65%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--progress-color) 34%, transparent));
}

.skills-circles.has-glow .skills-circle__number,
.skills-circle.has-glow .skills-circle__number {
  text-shadow:
    0 0 4px rgba(255,255,255,0.16),
    0 0 10px color-mix(in srgb, var(--progress-color) 24%, transparent);
}