/* ═══════════════════════════════════════════════════════════
   AEROVANIA — element refinements chosen on 2026-10-13
   from _preview/element-options.html:
     buttons        = pill; cyan, fading to the header gradient on hover; outline pill beside it
     page titles    = plain breadcrumb only (boxed tag + "01 ——" line removed in the HTML)
     section labels = short top rule
     number strips  = open, no boxes
     icons          = soft rounded tile
     hero pictures  = one soft note (.fx-hero-note, in the HTML)
     hour bars      = rounded bars
     course modules = numbered list, two columns
   Same --fx-* colours and fonts as before. Linked last on every page;
   remove the <link> to undo the CSS part.
   ═══════════════════════════════════════════════════════════ */

/* ── Buttons ───────────────────────────────────────────────── */
.fx-btn,
html[data-theme="dark"] .fx-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--fx-line2);
  border-radius: 999px;
  background: transparent;
  color: var(--fx-ink) !important;
  font: 600 15px/1 var(--fx-sans);
  transition: border-color .25s, color .25s, transform .2s;
}
.fx-btn > span { display: none; }            /* arrow glyphs */
.fx-btn:hover { border-color: var(--fx-cyan); color: var(--fx-cyan) !important; transform: translateY(-1px); }

.fx-btn.primary,
html[data-theme="dark"] .fx-btn.primary {
  border-color: transparent;
  background: var(--fx-cyan);
  color: #fff !important;
}
html[data-theme="dark"] .fx-btn.primary { color: #07111f !important; }

/* the header's gradient fades in on hover (gradients can't be transitioned directly) */
.fx-btn.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient);
  opacity: 0;
  transition: opacity .35s ease;
}
.fx-btn.primary:hover,
html[data-theme="dark"] .fx-btn.primary:hover {
  border-color: transparent;
  background: var(--fx-cyan);
  color: #fff !important;
}
.fx-btn.primary:hover::before { opacity: 1; }

.fx-btn.orange { border-color: transparent; background: var(--fx-orange); color: #1a0d05 !important; }
.fx-btn.orange:hover { color: #1a0d05 !important; filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .fx-btn, .fx-btn.primary::before { transition: none; }
  .fx-btn:hover { transform: none; }
}

/* ── Breadcrumb above page titles ──────────────────────────── */
.fx-crumb {
  gap: 8px;
  font: 400 14.5px/1.4 var(--fx-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fx-mut);
}
.fx-crumb i { font-size: 0; opacity: 1; }
.fx-crumb i::before { content: "›"; font-size: 16px; font-style: normal; color: var(--fx-mut); }
.fx-crumb a:hover { color: var(--fx-cyan) !important; }
body .fx .fx-hero-copy > .fx-crumb + h1 { margin-top: 22px; }   /* the removed tag used to make this gap */

/* ── Section labels: short top rule ────────────────────────── */
.fx-kicker {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  gap: 0;
  padding-top: 12px;
  border-top: 2px solid var(--fx-cyan);
  font: 600 14.5px/1.3 var(--fx-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fx-cyan);
}
.fx-kicker > i,
.fx-kicker > span:first-child:not(:last-of-type) { display: none; }   /* the "01" number and line */
.fx-kicker span { color: var(--fx-cyan); }
.fx-head .fx-kicker { align-self: flex-start; }

/* ── Number strips: open, no boxes ─────────────────────────── */
.fx .fx-stats,
.fx .fx-stats.boxed {
  gap: 24px;
  border: 0;
  background: none;
  box-shadow: none;
}
.fx .fx-stats > div,
.fx .fx-stats.boxed > div {
  padding: 2px 0 2px 18px !important;
  border-left: 2px solid var(--fx-line2) !important;
}
.fx .fx-stats > div:first-child { border-left-color: var(--fx-cyan) !important; }
.fx .fx-stats span {
  margin-top: 8px;
  font: 400 15px/1.45 var(--fx-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fx-mut);
}
@media (max-width: 620px) { .fx .fx-stats { row-gap: 22px; } }

/* ── Icons: soft rounded tile ──────────────────────────────── */
.fx .fx-seals { gap: 18px 32px; border: 0; background: none; box-shadow: none; }
.fx .fx-seals > div { padding: 4px 0; border: 0 !important; }
.fx .fx-seals .note { font: 400 14px/1.5 var(--fx-sans); letter-spacing: 0; text-transform: none; }
.fx-ico,
.fx .fx-seals .fx-ico {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fx-cyan) 11%, var(--fx-solid));
  color: var(--fx-cyan);
}
.fx-ico .o { stroke: var(--fx-cyan); }

/* ── Hero pictures: one soft note ──────────────────────────── */
.fx-hero-note {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 3%;
  max-width: min(290px, 68%);
  padding: 12px 16px;
  border: 1px solid var(--fx-line);
  border-radius: 12px;
  background: var(--fx-solid);
  box-shadow: 0 12px 30px -20px rgba(7, 17, 31, .55);
  font: 400 14px/1.45 var(--fx-sans);
  color: var(--fx-mut);
}
.fx-hero-note b { display: block; margin-bottom: 2px; font-size: 15.5px; font-weight: 600; color: var(--fx-ink); }

/* ── Training-hour bars: rounded ───────────────────────────── */
.fx-hbars span { font: 400 15px/1 var(--fx-sans); letter-spacing: 0; text-transform: none; color: var(--fx-tx); }
.fx-hbars i { height: 8px; overflow: hidden; border: 0; border-radius: 99px; background: var(--fx-line); }
.fx-hbars i b { inset: 0 auto 0 0; border-radius: 99px; }

/* ── Course modules: numbered list, two columns ────────────── */
ol.fx-chips { display: block; columns: 2; column-gap: 32px; margin: 0; padding: 0; }
ol.fx-chips li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--fx-line);
  background: none;
  break-inside: avoid;
  font: 400 15.5px/1.4 var(--fx-sans);
  color: var(--fx-ink);
}
ol.fx-chips li b { min-width: 16px; font: 600 15.5px/1.4 var(--fx-sans); letter-spacing: 0; color: var(--fx-cyan); }
@media (max-width: 620px) { ol.fx-chips { columns: 1; } }

/* ── Small labels: normal-case site font instead of spaced mono capitals ──
   Same pattern the boxed tag / "01 ——" line / stat captions used; covers the
   remaining labels site-wide (the 3D story section on enterprise keeps its own HUD). */
html body :is(
  .fx-card .fx-idx, .fx-card .fx-foot, .fx-flag, .fx-meta span, .fx-row .fx-name span,
  .fx-board-top, .fx-board-bottom, .fx-table th, .fx-step > span, .fx-note-box b:first-child,
  .fx-tablist button, .fx-field label, .fx-info span, .fx-date span, .fx-role, .fx-price small,
  .fx-flow-link, .fx-figure figcaption, .fx-footer-meta, .fx-hero-visual .cap,
  .fx-photo-tag, .fx-owner, .fx-path-total > span, .fx-phase-media figcaption, .fx-phase .fx-idx,
  .fx-news-meta, .fx-news-more, .fx-form-note,
  .fx-tile-k, .fx-tile-more .fx-tile-echo, .fx-tile.photo .fx-chip, .fx-more > summary,
  .fx-tracktabs button small, .fx-track-media figcaption, .fx-track-body .fx-idx, .fx-track-foot dt,
  .fx-mini-legend, .fx-seg button, .fx-chart-legend, .fx-chart-rows .lab small,
  .fx-vpanel .fx-idx, .fx-vpanel .fx-foot, .fx-checks small, .fx-gallery-ctl .hint,
  .fx-chips button, .fx-share a, .fx-share button, .fx-preview-banner,
  .fx-blog-count, .fx-article-byline, .fx-prose figcaption, .fx-prose th
) {
  font-family: var(--fx-sans);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
}
html body .fx-footer h4 { font: 600 15px/1.3 var(--fx-sans) !important; letter-spacing: 0; text-transform: none; }
html body :is(.fx-step > span, .fx-tracktabs button small, .fx-track-foot dt, .fx-table th) { font-weight: 500; }

/* ── Header call-to-action ("Register Now" / "Apply Now" / "Enquire Now") ──
   Plain fill with a gradient border; the gradient fills the button on hover.
   !important beats redesign.css, which forces solid orange on some pages. */
html body .cta-btn.cta-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--gradient) border-box !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  filter: none !important;
  transition: color .3s ease, transform .2s ease;
}
html body .cta-btn.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient);
  opacity: 0;
  transition: opacity .35s ease;
}
html body .cta-btn.cta-btn:hover,
html body .cta-btn.cta-btn:focus-visible { color: #fff !important; filter: none !important; transform: translateY(-1px); }
html body .cta-btn.cta-btn:hover::before,
html body .cta-btn.cta-btn:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html body .cta-btn.cta-btn, html body .cta-btn.cta-btn::before { transition: none; }
  html body .cta-btn.cta-btn:hover { transform: none; }
}