/**
 * DCU Footer Shape
 * =============================================================================
 *
 * The footer's signature diagonal notch, cut out of the footer element itself.
 *
 * WHY THIS EXISTS
 * ---------------
 * The notch used to be an Elementor image widget (whitewhite.png, 311x188)
 * positioned absolutely at `top: -193px; left: 258.8px` and rotated 14deg. Two
 * problems followed from that:
 *
 *   1. Roughly 148px of that white block sat ABOVE the footer's top edge, so it
 *      painted over whatever section came before it. Invisible on pages with a
 *      white section above, an obvious white gash on pages without one. That is
 *      the overlap that was reported. Raising the z-index cannot fix it — the
 *      block is physically in front of that content either way.
 *   2. The offsets were hardcoded pixels inside a percentage-width column, so
 *      the notch drifted at every viewport width. It was hidden below 1025px
 *      because there was no way to make it behave.
 *
 * Cutting the shape out of the footer's own box removes both problems by
 * construction: a clip-path cannot escape the element it clips.
 *
 * GEOMETRY
 * --------
 * Measured off production at a 1440px viewport, the original notch was:
 *
 *   - flat footer edge out to x = 883
 *   - a 14deg diagonal running down to x = 1196, reaching 78px deep
 *   - a vertical edge back up to the top at x = 1196
 *
 * The shape rendered here keeps that descent and apex but closes the notch
 * with a second, steeper diagonal instead of the vertical edge, making it a
 * shallow asymmetric V. That was a deliberate design change, not a port of
 * the original.
 *
 * A 313px run at 78px depth is exactly tan(14deg), and 313px is the width of
 * the source PNG — so the values below reproduce the original shape rather
 * than approximating it.
 *
 * Rendering the same page at 1280/1440/1680/1920 shows the original notch
 * ending at 87.5%, 83.3%, 78.6% and 75.0% of the viewport respectively: it
 * slides right to left as the window grows. Expressed against the content
 * column instead, all four land on the same number — 90px inside the column's
 * right edge. That is the anchor the design actually wanted, so that is what
 * the geometry below is built on.
 */

:root {
    /* Half the Elementor kit's content column (--container-max-width: 1140px),
       clamped so it never exceeds the viewport on narrow desktops. */
    --dcu-content-half: min(570px, 50% - 20px);

    /* Distance from the right edge of the content column to the apex of the
       notch. Measured off production at 1280/1440/1680/1920, the original sat
       at exactly 90px in all four cases; 115px nudges it 25px further left to
       taste. Anchoring here rather than to a viewport percentage is the whole
       fix — the old absolute positioning drifted from 87.5% to 75.0% of the
       viewport across that same range. */
    --dcu-notch-inset: 115px;

    /* Horizontal run of the descending diagonal. Sets the size of the whole
       notch: the depth and the closing edge are both derived from it.
       At 321px the apex lands 80px deep, matching the visual weight of the
       original 311x188 PNG. The cut clears the social icons (x 1222-1275)
       entirely; there is room up to roughly 460px before it reaches them. */
    --dcu-notch-run: 321px;

    /* tan(14deg) = 0.24933. Deriving the depth from the run is what locks the
       angle to the house style; do not set it by hand. */
    --dcu-notch-depth: calc(var(--dcu-notch-run) * 0.24933);

    /* The edge that closes the notch, running back up to the top.
       depth * tan(14deg) makes this edge perpendicular to the descending one,
       which is what turns the cut into the corner of a square tilted by 14deg
       rather than a V. That is the DCU mark's own motif, and it is also why
       the notch clears the social icons: at 76deg the edge climbs out in 20px
       instead of sweeping across them. */
    --dcu-notch-rise: calc(var(--dcu-notch-depth) * 0.24933);

    /* X position of the deepest point of the V. */
    --dcu-notch-apex: calc(50% + var(--dcu-content-half) - var(--dcu-notch-inset));

    --dcu-notch-clip: none;
}

/*
 * Elementor's desktop breakpoint. The original notch carried
 * `elementor-hidden-tablet elementor-hidden-mobile`, so it only ever showed on
 * desktop; that behaviour is preserved here.
 *
 * To show the notch on tablet and mobile too, move this custom property out of
 * the media query — the geometry is relative and will scale on its own.
 */
@media (min-width: 1025px) {
    :root {
        --dcu-notch-clip: polygon(
            0 0,
            calc(var(--dcu-notch-apex) - var(--dcu-notch-run)) 0,
            var(--dcu-notch-apex) var(--dcu-notch-depth),
            calc(var(--dcu-notch-apex) + var(--dcu-notch-rise)) 0,
            100% 0,
            100% 100%,
            0 100%
        );
    }
}