/*
 * British Lasers — reusable landing-page typography
 * -------------------------------------------------
 * Extracted and consolidated from the supplied landing page.
 * Apply these classes directly to semantic h1/h2/h3/p elements.
 *
 * Colour is intentionally flexible through the custom properties below;
 * font family, size, weight, line-height and tracking preserve the source
 * landing page's typography.
 *
 * Example:
 *   <div class="bl-type-scope" style="--bl-heading-color:#080d24">
 *     <p class="bl-tagline">Professional laser systems</p>
 *     <h2 class="bl-h2">
 *       Our Professional
 *       <span class="bl-curly-underline">Machines
 *         <svg viewBox="0 0 300 20" preserveAspectRatio="none"
 *              aria-hidden="true" focusable="false">
 *           <path d="M4 14 C 60 6, 150 4, 296 11"></path>
 *         </svg>
 *       </span>
 *     </h2>
 *   </div>
 *
 * Source mapping:
 *   .bil-hero h1         -> .bl-h1
 *   .bil-hero-lead       -> .bl-intro
 *   .bil-section-copy    -> .bl-body/.bl-section-intro
 *   .bil-section-heading -> .bl-h2
 *   .bil-eyebrow         -> .bl-tagline
 *   content/card h3s     -> .bl-h3 and its size modifiers
 *   .bil-accent-underline-> .bl-curly-underline
 */

/* Optional wrapper: change colours per landing page without changing scale. */
.bl-type-scope {
  --bl-heading-color: #080d24;
  --bl-body-color: #64718c;
  --bl-tagline-color: #5333d2;
  --bl-accent-color: #5333d2;
  --bl-underline-color: #69e3eb;
  --bl-type-font:
    "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  color: var(--bl-body-color);
  font-family: var(--bl-type-font);
}

/* Keep component margins predictable; layout containers provide spacing. */
:where(
  .bl-h1,
  .bl-h2,
  .bl-h3,
  .bl-tagline,
  .bl-intro,
  .bl-body,
  .bl-section-intro
) {
  margin: 0;
  font-family: var(
    --bl-type-font,
    "Manrope",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
}

/* H1: primary above-the-fold heading. */
.bl-h1 {
  max-width: 1070px;
  color: var(--bl-heading-color, #080d24);
  font-size: clamp(35.15px, 5.19vw, 68.4px);
  font-weight: 900;
  line-height: 0.99;
  letter-spacing: -0.056em;
}

/* Optional second H1 line/accent; retains the source page's line break. */
.bl-h1__accent {
  display: block;
  margin-top: 5px;
  color: var(--bl-accent-color, #5333d2);
}

/* Intro: larger opening paragraph immediately beneath H1. */
.bl-intro {
  max-width: 810px;
  color: var(--bl-body-color, #64718c);
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 500;
  line-height: 1.74;
}

.bl-intro strong {
  color: var(--bl-heading-color, #080d24);
  font-weight: 800;
}

/* H2: main section heading. */
.bl-h2 {
  max-width: 850px;
  color: var(--bl-heading-color, #080d24);
  font-size: clamp(30.4px, 3.8vw, 49.4px);
  font-weight: 900;
  line-height: 1.07;
  letter-spacing: -0.045em;
}

/* Colour-only H2 accent; use on a nested span where required. */
.bl-h2__accent {
  color: var(--bl-accent-color, #5333d2);
}

/*
 * H3: standard content heading.
 * The source used three H3 scales; modifiers retain those intentional roles.
 */
.bl-h3 {
  color: var(--bl-heading-color, #080d24);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

/* Large feature/product-card H3. */
.bl-h3--feature {
  font-size: clamp(24.3px, 2.68vw, 36.45px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

/* Compact benefit/card H3. */
.bl-h3--compact {
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* Header tagline/eyebrow, e.g. “Professional laser systems”. */
.bl-tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bl-tagline-color, #5333d2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bl-tagline::before,
.bl-tagline::after {
  width: 23px;
  height: 1px;
  flex: 0 0 auto;
  content: "";
  background: currentColor;
  opacity: 0.45;
}

/* General page/body text. */
.bl-body {
  color: var(--bl-body-color, #64718c);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}

/* Centred section introduction: same reading style with source max-width. */
.bl-section-intro {
  max-width: 760px;
  color: var(--bl-body-color, #64718c);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  text-align: center;
}

/*
 * Hand-drawn/curly underline.
 * Keep the inline SVG path from the example above. Only the colour is variable.
 */
.bl-curly-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}

.bl-curly-underline > svg {
  position: absolute;
  left: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.28em;
  overflow: visible;
  pointer-events: none;
}

.bl-curly-underline > svg path {
  fill: none;
  stroke: var(--bl-underline-color, #69e3eb);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: bl-underline-draw 1.05s 0.28s cubic-bezier(0.6, 0.05, 0.2, 1)
    forwards;
}

@keyframes bl-underline-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Useful alignment helpers; they change placement, not the type system. */
.bl-type--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.bl-type--on-dark {
  --bl-heading-color: #fff;
  --bl-body-color: rgba(255, 255, 255, 0.72);
  --bl-tagline-color: #8de8ef;
  --bl-accent-color: #c9c0ff;
}

@media (max-width: 650px) {
  .bl-h1 {
    font-size: clamp(33.25px, 9.6vw, 47.5px);
  }

  .bl-h2 {
    font-size: clamp(29.45px, 8.55vw, 38.95px);
  }

  .bl-h3--feature {
    font-size: clamp(23.4px, 7.3vw, 30.6px);
  }

  .bl-tagline {
    font-size: 10.56px;
  }

  .bl-intro {
    font-size: 15.5px;
  }

  .bl-body,
  .bl-section-intro {
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-curly-underline > svg path {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}