/*
Theme Name: APL Forge
Author: Dyalog
Author URI: https://dyalog.com/
Template: hello-elementor
Version: 4.11.1
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   INDEX
   ==========================================================================

    0. Colour reference and design tokens
    1. Elementor fixes
    2. Utilities
    3. Header and main menu
    4. Hero: layout
    5. Hero: heading
    6. Hero: background video
    7. Hero: inner container border
    8. Hero: video mirrors (inner container and header)
    9. Hero: prize boxes, and frosted glass
   10. Hero: video pause/play button
   11. Content sections
   12. Forge divider
   13. Footer
   14. Links

   Related files:
   - The mirror, reduced-motion and pause/play script lives in
     Elementor > Custom Code (end of body). Sections 6, 8 and 10 depend on it.
   - The menu slider script also lives in Custom Code. Section 3 depends on it.
   - This file is loaded as style.css?ver=2.0.0 whatever the Version line
     above says, so hard-refresh after uploading, or bump the version in
     functions.php to bust caches.
   ========================================================================== */


/* ==========================================================================
   0. Colour reference and design tokens
   --------------------------------------------------------------------------
   Elementor global colours (Site Settings > Global Colours):

   --e-global-color-4f147a1   #0A0A0A   Page background (near black)
   --e-global-color-90402e3   #E32B00   Forge red
   --e-global-color-b459eec   #ECEAE3   Off-white text
   --e-global-color-2f99f14   #1F2225   Dark grey

   The rest of this file uses the readable --forge-* names below, never the
   Elementor names directly. If a global colour is ever recreated in
   Elementor and gets a new code, only this block needs updating.
   ========================================================================== */

/* Colour aliases. These must be set on body, not :root: Elementor defines
   its global colours on the body (its "kit" class), so at :root they don't
   exist yet and the aliases would come out empty. */
body {
  --forge-page-bg: var(--e-global-color-4f147a1);
  --forge-red: var(--e-global-color-90402e3);
  --forge-text: var(--e-global-color-b459eec);
}

:root {
  /* 1px border of the hero box and the content boxes (sections 7 and 11).
     White at 13% looks the same as the old #1F2225 with a "screen" blend,
     without the cost of blending. */
  --forge-border: rgba(255, 255, 255, 0.13);

  /* Layout, shared by the hero (section 4) and content sections (11) */
  --forge-max-width: 1696px;                        /* box width cap, as Railway */
  --forge-outer-gap: clamp(10px, 2.5vw, 32px);      /* box to window edge */
  --forge-inner-padding: clamp(16px, 4vw, 64px);    /* inside the box, sides */
  --forge-radius: 16px;                             /* box corners */

  /* Video: how strong it is in the outer area around the hero box.
     1 = full, 0.5 = half. The header copy (section 8) uses the same value
     at its bottom edge, so there is no step where header meets hero. */
  --forge-outer-video-opacity: 0.7;

  /* Film grain (dithering), used in sections 6, 7 and 11. A small SVG
     noise tile the browser generates itself, so there is no image file.
     Opacity: 0.08 is barely there, 0.2 is visible grain. */
  --forge-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --forge-grain-size: 200px;
  --forge-grain-opacity: 0.12;
}


/* ==========================================================================
   1. Elementor fixes
   ========================================================================== */

/* Removes the bottom margin from the last paragraph in any Text Editor
   widget, so the widget's spacing isn't padded by an invisible gap. */
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* Gives lists in Text Editor widgets the same gap below them as a
   paragraph (Hello Elementor's 0.9rem), so text after a list doesn't sit
   tight against it. A list at the very end of the widget gets no gap, like
   the last paragraph above. */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  margin-block-end: 0.9rem;
}

.elementor-widget-text-editor ul:last-child,
.elementor-widget-text-editor ol:last-child {
  margin-block-end: 0;
}

/* Stops in-page anchor links (e.g. #faqs) scrolling the target under the
   sticky header: the browser stops 91px short, the header's height. */
html {
  scroll-padding-top: 91px;
}


/* ==========================================================================
   2. Utilities
   ========================================================================== */

/* Centres a button inside a flex container, whatever the container's own
   alignment setting is. Add the class btn-center to the button widget. */
.btn-center {
  align-self: center;
}


/* ==========================================================================
   3. Header and main menu
   --------------------------------------------------------------------------
   The Mega Menu widget needs the class forge-main-menu.
   ========================================================================== */

/* Scales the menu to fit the header between tablet and desktop widths:
   - Title font size scales from 10px up to 0.72rem (about 11.5px).
   - Horizontal padding between items scales from 6px up to 1rem.
   - nowrap stops long items (e.g. "Eligibility & Judging") breaking onto
     two lines.
   These are Elementor's own menu variables, so !important is needed to beat
   the values Elementor writes from the widget settings. */
.elementor-widget-n-menu.forge-main-menu {
  --n-menu-title-font-size: clamp(10px, 4.5px + 0.535vw, 0.72rem) !important;
  --n-menu-title-padding: 0.5rem clamp(6px, 2.8vw - 20.7px, 1rem) !important;
  --n-menu-heading-wrap: nowrap !important;
}

/* Sliding underline under the menu items. The script in Custom Code adds a
   <span class="forge-slider-bar"> to the menu, moves it under whichever item
   is hovered, and fades it out when the mouse leaves the menu. */

/* Makes the menu's item row the reference point for positioning the bar. */
.forge-main-menu .e-n-menu-heading {
  position: relative;
}

/* The underline itself. Starts invisible and zero width; the script sets its
   width and position. Slides in 0.3s, fades more slowly (0.6s) so it lingers
   briefly after the mouse leaves. */
.forge-main-menu .forge-slider-bar {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--forge-red);
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.3s, width 0.3s, opacity 0.6s;
  z-index: 5;
}


/* ==========================================================================
   4. Hero: layout
   --------------------------------------------------------------------------
   outer-hero is the full-width container holding the video.
   forge-hero-inner is the rounded box inside it.
   ========================================================================== */

/* Gap between the inner box and the window edges at the sides: 10px to
   32px depending on window width. Only the sides are set here: top and
   bottom padding are left to Elementor (Advanced > Padding). */
.outer-hero {
  position: relative;
  padding-inline: var(--forge-outer-gap);
}

/* The inner box: fills the width up to 1696px (the same cap Railway uses
   for its hero), centred, rounded corners.
   overflow: hidden clips the mirror canvas to the rounded corners.
   Side padding scales from 16px up to 64px. Top and bottom padding are
   left to Elementor (Advanced > Padding). */
.forge-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--forge-max-width);
  margin-inline: auto;
  border-radius: var(--forge-radius);
  overflow: hidden;
  padding-inline: var(--forge-inner-padding);
}


/* ==========================================================================
   5. Hero: heading
   --------------------------------------------------------------------------
   The main H1. The heading widget needs the class forge-hero-title.
   ========================================================================== */

/* Each <span class="line"> in the heading text starts on a new line, so the
   break always falls where you put it. */
.forge-hero-title .line {
  display: block;
}

/* Scales the heading smoothly with the window width: 36px on phones, up to
   60px on wide screens. The long selector is deliberate: it is more
   specific than Elementor's own per-widget font size, so this always wins.
   Change the last clamp value to change the maximum size. */
.elementor .forge-hero-title.elementor-widget-heading.elementor-element .elementor-heading-title {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem);
  line-height: 1.1;
}


/* ==========================================================================
   6. Hero: background video
   --------------------------------------------------------------------------
   There is one real video, the background video of outer-hero. It bleeds
   out around the inner box, and is copied into the inner box and header by
   the mirror script (section 8).
   ========================================================================== */

/* Fades the bottom of the hero into the page background, so the video has
   no hard bottom edge. The fade starts 40% of the way down and uses eased
   stops (slow start, slow finish) rather than a straight line, so there is
   no visible point where it begins or ends.
   Each stop is the page background global colour at rising strength, mixed
   with color-mix(), so the fade always matches the background even if that
   global colour changes.
   Drawn on ::before so the grain layer (::after, next rule) can sit on top
   of it. Both sit above the video (z-index 1) but below the hero content
   (z-index 2). */
.outer-hero::before {
  --fade: var(--forge-page-bg);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    transparent                                    40%,
    color-mix(in srgb, var(--fade) 6%, transparent)  50%,
    color-mix(in srgb, var(--fade) 18%, transparent) 60%,
    color-mix(in srgb, var(--fade) 38%, transparent) 70%,
    color-mix(in srgb, var(--fade) 62%, transparent) 80%,
    color-mix(in srgb, var(--fade) 84%, transparent) 90%,
    color-mix(in srgb, var(--fade) 96%, transparent) 96%,
    var(--fade)                                      100%
  );
}

/* Film grain (dithering). Dark gradients show visible steps ("banding")
   because screens only have 256 levels per colour, and near black those
   levels are far apart. A faint layer of random noise breaks the steps up,
   so the fade and the dark parts of the video look smooth.
   The noise tile (--forge-grain, section 0) is repeated across the hero.
   "overlay" makes it lighten and darken by equal amounts, so it doesn't
   lift the blacks. Size and strength are set in section 0 and shared with
   the inner box (section 7). The content boxes (section 11) use the same
   texture with their own blend and strength. */
.outer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--forge-grain);
  background-size: var(--forge-grain-size);
  mix-blend-mode: overlay;
  opacity: var(--forge-grain-opacity);
}

/* Lifts the hero content above the bottom fade and the grain. */
.outer-hero > .e-con {
  position: relative;
  z-index: 2;
}

/* Blends the video into the page with "screen": the video's blacks become
   exactly the page background colour, so there is no visible seam where the
   video meets the page. The blend has to go on Elementor's video wrapper, not
   the video itself, because the wrapper is its own layer (z-index 0). */
.outer-hero > .elementor-background-video-container {
  mix-blend-mode: screen;
}

/* Elementor sizes the video with inline px values that go stale when the
   hero grows on narrow screens. Force it to always cover the container.
   The forge-mirror script uses the same cover maths, so keep these in step.
   The 6px bleed on each side pushes the blur's soft edge outside the
   container, where overflow: hidden cuts it off. Without it the blur
   darkens the top of the hero and reads as a line under the header.
   The blur puts the video slightly out of focus; keep it in step with BLUR
   in the Custom Code script, which blurs the header copy to match. */
.outer-hero > .elementor-background-video-container video {
  top: -6px !important;
  left: -6px !important;
  width: calc(100% + 12px) !important;
  height: calc(100% + 12px) !important;
  transform: none !important;
  object-fit: cover;
  filter: blur(2px);
  opacity: var(--forge-outer-video-opacity);
}

/* On phones Elementor doesn't load the video at all. But if the page is
   opened on a desktop and the window is then narrowed, the video keeps
   playing behind the inner box, where it is barely visible and costs the
   most to draw. Hide it at mobile widths so a narrowed desktop window
   behaves like a phone. */
@media (max-width: 767px) {
  .outer-hero > .elementor-background-video-container {
    display: none;
  }
}


/* ==========================================================================
   7. Hero: inner container border
   ========================================================================== */

/* The inner box's 1px border, drawn on a pseudo-element so it can sit above
   the grain. It is white at 13% opacity, which looks the same as the old
   #1F2225 border with a "screen" blend (screen with a grey of 13% and white
   at 13% opacity give the same result), but the browser no longer has to
   blend a layer the size of the whole box over the video on every frame.
   Set Border Type to None on the container in Elementor so there aren't two
   borders.
   z-index 3 keeps the border on top of the grain (z-index 1) and content
   (z-index 2), so the grain doesn't texture the line and make it look
   heavier. */
.forge-hero-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--forge-border);
  border-radius: inherit;
  pointer-events: none;
}


/* The same film grain as the outer hero (section 6), so dark areas of the
   video inside the box are dithered too. The box is its own layer, so the
   grain blends with the mirrored video inside it.
   z-index 1 puts it above the mirror canvas (z-index 0); the next rule lifts
   the box's content above the grain so text and buttons stay clean. */
.forge-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--forge-grain);
  background-size: var(--forge-grain-size);
  mix-blend-mode: overlay;
  opacity: var(--forge-grain-opacity);
}

/* Lifts the inner box's content (heading, text, buttons, prize boxes) above
   the grain. */
.forge-hero-inner > .elementor-element {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   8. Hero: video mirrors (inner container and header)
   --------------------------------------------------------------------------
   The Custom Code script adds a <canvas class="forge-mirror"> to the inner
   box and to the header, and copies the matching part of the outer video
   onto each one, every frame. That keeps all three perfectly lined up, so
   embers cross the edges without a seam.
   The header container needs the class forge-header.
   ========================================================================== */

/* Makes each mirror canvas fill its container, behind the content. */
.forge-mirror {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* The video is hidden on mobile (section 6), so there is nothing to
   mirror. Hide the canvases so no stale frame shows. */
@media (max-width: 767px) {
  .forge-mirror {
    display: none;
  }
}

/* Elementor's sticky header leaves an invisible copy of the header in the
   page (the "spacer") to hold its place. The copy is made after the script
   adds its mirror, so it carries an empty canvas; hide it. */
.elementor-sticky__spacer .forge-mirror {
  display: none;
}

/* Header copy of the video:
   - "screen" matches the outer video's blend, so blacks match the page.
   - The mask dims the video towards the top of the header (35% at the top,
     rising to the outer video's strength at the bottom edge where it meets
     the hero), so it is calmer behind the nav without creating a line at
     the join.
   The script also fades this out over the first 120px of scrolling. */
.forge-header > .forge-mirror {
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, var(--forge-outer-video-opacity)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, var(--forge-outer-video-opacity)));
}


/* ==========================================================================
   9. Hero: prize boxes, and frosted glass
   --------------------------------------------------------------------------
   The three "What you could win" boxes. The grid holding them needs the
   class prize-boxes; the blur applies to each box inside it, not the gaps.
   The rule only works inside the hero (forge-hero-inner), where there is
   video behind the boxes. Elsewhere the class does nothing, so cards that
   reuse "prize-boxes" (e.g. the category cards) don't get the blur on each
   of their inner rows, which showed as rectangles behind the text.

   For a frosted box anywhere else, add "forge-glass" to the box itself.
   Also here: "winner-past" for older winners' boxes, at the end.
   ========================================================================== */

/* Frosted-glass effect: blurs the video showing through each box. The video
   there is mostly dark, so this mainly softens embers drifting behind the
   boxes. */
.forge-hero-inner .prize-boxes > .e-con,
.forge-glass {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Off on mobile: the video is hidden there, so there is nothing to blur. */
@media (max-width: 767px) {
  .forge-hero-inner .prize-boxes > .e-con,
  .forge-glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* Past winners (Previous Winners page). Add "winner-past" to a winner box
   from an earlier year. The current year keeps the Forge red tint; past
   years get a neutral grey glass and slightly dimmed text, so the red
   reads as "current" and grey as "archive". Each new year, move the class
   onto the previous year's boxes.
   !important is needed to beat the background colour Elementor writes
   from the box's own settings. */
.winner-past {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.winner-past > * {
  opacity: 0.6;
}

/* Hover for the winner boxes. Applies to any prize box that is a link
   (Elementor turns a container with a link into an <a>), so no extra
   class is needed. On hover or keyboard focus every box goes to the same
   brighter state: a stronger red tint, a lighter border and full-strength
   text. So a current box brightens a little, and a past box brightens
   further, from grey up to the same level.
   The selectors here are more specific than .winner-past, so they win
   over it on hover. Elementor already animates the background and border;
   the first rule animates the text dimming to match. */
a.prize-boxes > * {
  transition: opacity 0.3s;
}

a.prize-boxes:hover,
a.prize-boxes:focus-visible {
  background-color: rgba(230, 42, 0, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

a.prize-boxes:hover > *,
a.prize-boxes:focus-visible > * {
  opacity: 1;
}


/* ==========================================================================
   10. Hero: video pause/play button
   --------------------------------------------------------------------------
   The small round button in the bottom-right corner of the inner box.
   The Custom Code script creates it, swaps its icon and label, pauses the
   video when the OS reduced-motion setting is on, and remembers the choice.
   ========================================================================== */

/* Resting look: a faint white circle, 30px across. */
.forge-video-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Invisible 44px hit area around the 30px button, so it stays easy to tap
   and click without looking bigger. */
.forge-video-toggle::before {
  content: "";
  position: absolute;
  inset: -7px;
}

/* Cancels Hello Elementor's pink/red focus colour. Without this, the button
   stays coloured after a click until you click elsewhere. Must come before
   :hover so hover still works on a focused button. */
.forge-video-toggle:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.55);
}

/* Hover: a little brighter. */
.forge-video-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.9);
}

/* Pressed: brighter still, for the moment of the click. */
.forge-video-toggle:active {
  background: rgba(255, 255, 255, 0.16);
}

/* Keyboard focus ring. Only shows for keyboard users, not mouse clicks. */
.forge-video-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}

/* Size and colour of the play/pause icon inside the button. */
.forge-video-toggle svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* Hidden on mobile, where the background video is hidden too. */
@media (max-width: 767px) {
  .forge-video-toggle {
    display: none;
  }
}


/* ==========================================================================
   11. Content sections
   --------------------------------------------------------------------------
   Same layout as the hero, without the video. outer-content is the
   full-width container; forge-content-inner is the box inside it.
   The box has a background that fades to transparent downwards, and a 1px
   border on the top and sides only. The side borders fade out in step
   with the background.

   forge-content-inner-norm: the same faded background, grain, border and
   rounded top corners, but none of the width, centring or padding, so
   Elementor's own settings for those apply. Use it where the box sits
   inside another layout (e.g. the FAQ page).
   ========================================================================== */

/* Box background colour. Change it here and both the fill and its fade
   update.
   --forge-content-fade: how far down the fade runs before it is fully
   transparent. Short boxes fade over their whole height; tall ones (like
   the FAQ page) fade over this distance and stay clear below it. Without
   the cap, a 5000px box spreads the 10 shades between #141414 and the
   page background over 5000px, so each shade becomes a visible 500px
   band. */
.forge-content-inner,
.forge-content-inner-norm {
  --forge-content-bg: #141414;
  --forge-content-fade: min(100%, 800px);
}

/* Gap between the box and the window edges at the sides, matching the
   hero. Only the sides are set here: top and bottom padding are left to
   Elementor (Advanced > Padding on the container). */
.outer-content {
  padding-inline: var(--forge-outer-gap);
}

/* Layout (forge-content-inner only): same width, centring and side
   padding as the hero's inner box. Top and bottom padding are left to
   Elementor. */
.forge-content-inner {
  width: 100%;
  max-width: var(--forge-max-width);
  margin-inline: auto;
  padding-inline: var(--forge-inner-padding);
}

/* Look (both classes): rounded top corners, and a background that fades
   from the full colour at the top to transparent (see --forge-content-fade
   above). */
.forge-content-inner,
.forge-content-inner-norm {
  position: relative;
  border-radius: var(--forge-radius) var(--forge-radius) 0 0;
  background: linear-gradient(
    to bottom,
    var(--forge-content-bg) 0%,
    transparent var(--forge-content-fade)
  );
}

/* Top and side border, the same 1px line as the hero box (section 7).
   Drawn on a pseudo-element so it can be faded: the mask runs
   from solid at the top to invisible at the bottom, the same fade as the
   background, so the sides disappear downwards and there is no bottom
   edge. The top line stays at full strength.
   z-index 3 keeps it above the grain (z-index 1), as in the hero. */
.forge-content-inner::after,
.forge-content-inner-norm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--forge-border);
  border-bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent var(--forge-content-fade));
  mask-image: linear-gradient(to bottom, #000 0%, transparent var(--forge-content-fade));
}


/* Film grain inside the box (dithering), using the site grain texture.
   The background here is very dark and changes by only about 10 shades
   over the fade, so each shade would show as a flat band. The grain breaks
   the bands up.
   - "hard-light" rather than the hero's "overlay": overlay scales the grain
     by the brightness underneath, so on colours this dark it does almost
     nothing. Hard-light adds about one shade of noise whatever the
     brightness, which is what dithering needs.
   - The mask keeps the grain at full strength for the first 60% of the
     fade, then fades it out by the end of the fade, so it never runs past
     the bottom of a short box. (Fading it across the whole fade, as
     before, left too little grain lower down, where the bands showed.)
   - --forge-content-dither sets the strength. 0.05 is about one shade of
     noise; higher also lightens the box slightly.
   Same layering as the hero box: background, grain (::before, z-index 1),
   content (z-index 2), border (::after, z-index 3). */
.forge-content-inner,
.forge-content-inner-norm {
  --forge-content-dither: 0.05;
}

.forge-content-inner::before,
.forge-content-inner-norm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--forge-grain);
  background-size: var(--forge-grain-size);
  mix-blend-mode: hard-light;
  opacity: var(--forge-content-dither);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--forge-content-fade) * 0.6), transparent var(--forge-content-fade));
  mask-image: linear-gradient(to bottom, #000 calc(var(--forge-content-fade) * 0.6), transparent var(--forge-content-fade));
}

/* Lifts the box's content above the grain. The .e-con-inner line covers
   containers set to "Boxed" in Elementor, which wrap their content in an
   extra element. */
.forge-content-inner > .elementor-element,
.forge-content-inner-norm > .elementor-element,
.forge-content-inner > .e-con-inner,
.forge-content-inner-norm > .e-con-inner {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   12. Forge divider
   --------------------------------------------------------------------------
   Elementor divider widgets with the class "forge-div". Adds a 2px Forge
   red bar directly under the 1px divider line, starting from the left.
   The bar is 50% of the divider width by default. To change it, add one
   of these classes next to "forge-div" (Advanced > CSS Classes):
     forge-div-10, forge-div-20, forge-div-30, forge-div-40,
     forge-div-50, forge-div-60
   Example: "forge-div forge-div-30"
   Also here: the glow dividers ("forge-div-glow-bottom" and
   "forge-div-glow-top"), further down.
   ========================================================================== */

.forge-div {
  --forge-div-fill: 50%;
}

.forge-div-10 { --forge-div-fill: 10%; }
.forge-div-20 { --forge-div-fill: 20%; }
.forge-div-30 { --forge-div-fill: 30%; }
.forge-div-40 { --forge-div-fill: 40%; }
.forge-div-50 { --forge-div-fill: 50%; }
.forge-div-60 { --forge-div-fill: 60%; }

.forge-div .elementor-divider-separator {
  position: relative;
}

.forge-div .elementor-divider-separator::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--forge-div-fill);
  height: 2px;
  background-color: var(--forge-red);
  pointer-events: none;
}


/* Glow dividers: Elementor divider widgets with the class
   "forge-div-glow-bottom" (glow spreads down from the line) or
   "forge-div-glow-top" (glow spreads up). The glow comes from the middle of
   the line, covers about half its width and fades out within 40px. The
   line itself is left as set in Elementor.

   Colour: add one of these next to the glow class (Advanced > CSS Classes):
     red    Forge red (the default if no colour class is given)
     white  off-white
     grey   neutral grey
   Position: add "left" or "right" to move the glow to that half of the
   line. Without either, it sits in the middle.
   Example: "forge-div-glow-top white" or "forge-div-glow-bottom red left"
   The colour and position classes only work together with a glow class, so they don't
   affect anything else on the site.

   To adjust:
     --forge-glow-strength  how strong the glow is at its centre (0% to 100%).
                            Each colour has its own, as white reads much
                            brighter than red at the same value.
     --forge-glow-width     how much of the line it spans
     --forge-glow-depth     how far it reaches
     --forge-glow-noise     how much grain is in the glow (0 = none,
                            0.25 = strong). Uses the site grain texture.
   z-index 1 keeps the glow above the neighbouring section's background. */
.forge-div-glow-bottom,
.forge-div-glow-top {
  --forge-glow-colour: var(--forge-red);
  --forge-glow-strength: 18%;
  --forge-glow-width: 50%;
  --forge-glow-depth: 40px;
  --forge-glow-noise: 0.12;
  --forge-glow-x: 50%;
}

/* Position: where the middle of the glow sits along the line. With the
   glow 50% wide, 25% fills the left half and 75% the right half. */
.forge-div-glow-bottom.left,
.forge-div-glow-top.left {
  --forge-glow-x: 25%;
}

.forge-div-glow-bottom.right,
.forge-div-glow-top.right {
  --forge-glow-x: 75%;
}

.forge-div-glow-bottom.red,
.forge-div-glow-top.red {
  --forge-glow-colour: var(--forge-red);
  --forge-glow-strength: 18%;
}

.forge-div-glow-bottom.white,
.forge-div-glow-top.white {
  --forge-glow-colour: var(--forge-text);
  --forge-glow-strength: 8%;
}

.forge-div-glow-bottom.grey,
.forge-div-glow-top.grey {
  --forge-glow-colour: #8A8A8A;
  --forge-glow-strength: 10%;
}

.forge-div-glow-bottom .elementor-divider-separator,
.forge-div-glow-top .elementor-divider-separator {
  position: relative;
}

/* Shared shape of the glow (::after) and its grain (::before) */
.forge-div-glow-bottom .elementor-divider-separator::before,
.forge-div-glow-top .elementor-divider-separator::before,
.forge-div-glow-bottom .elementor-divider-separator::after,
.forge-div-glow-top .elementor-divider-separator::after {
  content: "";
  position: absolute;
  left: var(--forge-glow-x);
  z-index: 1;
  width: var(--forge-glow-width);
  height: var(--forge-glow-depth);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Downwards: sits under the line, brightest at its top edge */
.forge-div-glow-bottom .elementor-divider-separator::after {
  top: 100%;
  background: radial-gradient(
    ellipse 50% 100% at 50% 0%,
    color-mix(in srgb, var(--forge-glow-colour) var(--forge-glow-strength), transparent),
    transparent
  );
}

/* Grain over the glow. "hard-light" lets the grain both lighten and
   darken the glow, so it shows even on a glow this faint ("overlay", used
   for the hero grain, barely registers here). The mask is the same shape
   as the glow, so the grain follows it and fades out with it. */
.forge-div-glow-bottom .elementor-divider-separator::before,
.forge-div-glow-top .elementor-divider-separator::before {
  z-index: 2;
  background-image: var(--forge-grain);
  background-size: var(--forge-grain-size);
  mix-blend-mode: hard-light;
  opacity: var(--forge-glow-noise);
}

.forge-div-glow-bottom .elementor-divider-separator::before {
  top: 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000, transparent);
}

.forge-div-glow-top .elementor-divider-separator::before {
  bottom: 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000, transparent);
  mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000, transparent);
}

/* Upwards: sits above the line, brightest at its bottom edge */
.forge-div-glow-top .elementor-divider-separator::after {
  bottom: 100%;
  background: radial-gradient(
    ellipse 50% 100% at 50% 100%,
    color-mix(in srgb, var(--forge-glow-colour) var(--forge-glow-strength), transparent),
    transparent
  );
}


/* ==========================================================================
   13. Footer
   ========================================================================== */

/* Makes the footer logo a block element, so it doesn't sit on an invisible
   line of text (Elementor makes images inline-block, which adds space above
   a small image and knocks it off-centre against the copyright text). */
footer .elementor-widget-image img {
  display: block;
}


/* ==========================================================================
   14. Links
   --------------------------------------------------------------------------
   Links in body text, "ex-link" list links, the dy_ShowHide lists, and
   any link in a Text Editor widget (including list links and text not
   wrapped in a paragraph).
   Style based on haydenbleasel.com: the link keeps the surrounding text
   colour and gets a thin underline in the same colour, set a little below
   the text.
   The underline scales with the font: 0.0625em is 1px at 16px text and
   2px at 32px, never thinner than 1px.
   Hover and keyboard focus: the text dims to 65% of its own colour and the
   underline takes that colour, so it works on any text colour.
   Keyboard focus also gets a 2px Forge red outline.
   To tint the underline Forge red instead, set --link-line to
   var(--forge-red).
   !important is kept because Elementor's own link colours are otherwise
   more specific.
   ========================================================================== */

body p a,
body ul li a.ex-link,
body .dy_ShowHide li a,
.elementor-widget-text-editor a {
  --link-line: currentColor;
  color: inherit !important;
  border-bottom: 0 !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: max(1px, 0.0625em) !important;
  text-decoration-color: var(--link-line) !important;
  text-underline-offset: 0.2em !important;
  transition: color 0.16s ease, text-decoration-color 0.16s ease !important;
}

body p a:hover,
body p a:focus-visible,
body ul li a.ex-link:hover,
body ul li a.ex-link:focus-visible,
body .dy_ShowHide li a:hover,
body .dy_ShowHide li a:focus-visible,
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus-visible {
  color: color-mix(in srgb, currentColor 65%, transparent) !important;
  text-decoration-color: currentColor !important;
}

body p a:focus-visible,
body ul li a.ex-link:focus-visible,
body .dy_ShowHide li a:focus-visible,
.elementor-widget-text-editor a:focus-visible {
  outline: 2px solid var(--forge-red);
  outline-offset: 3px;
  border-radius: 2px;
}