/* ==========================================================================
   Arctic Wolf Notches — base styles
   Per-instance colors (fill, path, stage) are injected by Elementor via
   {{WRAPPER}}-scoped selectors on the widget class. The values below are
   fallbacks used when a control is left blank.
   ========================================================================== */

.aw-branded-notch {
  --sep-h: 64px;
  --notch-w: calc(var(--sep-h) * 339.63 / 60.8);

  display: flex;
  width: 100%;
  height: var(--sep-h);
  position: absolute;
  overflow: hidden;
}

.aw-branded-notch-fill {
  flex: 1 1 auto;
  background: #0e183c;
}

.aw-branded-notch-stage {
  position: relative;
  width: 100%;
  max-width: 1500px;
  height: var(--sep-h);
  background: transparent;
}

.aw-branded-notch-shape {
  position: absolute;
  width: var(--notch-w);
  height: var(--sep-h);
  display: block;
  overflow: visible;
  pointer-events: none;
}

.aw-branded-notch-path {
  fill: #0e183c;
}


/* =========================
   TOP VERSION
   ========================= */

.aw-branded-notch--top {
  top: calc(var(--sep-h) * -1);
}

.aw-branded-notch--top .aw-branded-notch-stage {
  top: -1px;
}

.aw-branded-notch--top .aw-branded-notch-shape {
  top: 0;
}

.aw-branded-notch--top .aw-branded-notch-shape--left {
  left: 0;
  transform: translate(-1px, 1px);
}

.aw-branded-notch--top .aw-branded-notch-shape--right {
  right: -1px;
  transform: translate(0, 1px);
}


/* =========================
   BOTTOM VERSION
   ========================= */

.aw-branded-notch--bottom {
  top: auto;
  bottom: calc(var(--sep-h) * -1);
}

.aw-branded-notch--bottom .aw-branded-notch-stage {
  top: 1px;
}

.aw-branded-notch--bottom .aw-branded-notch-shape {
  top: auto;
  bottom: 0;
  transform-origin: center center;
}

.aw-branded-notch--bottom .aw-branded-notch-shape--left {
  left: 0;
  transform: translate(-1px, -1px) rotateX(180deg);
}

.aw-branded-notch--bottom .aw-branded-notch-shape--right {
  right: -1px;
  transform: translate(0, -1px) rotateX(180deg);
}


/* =========================
   RESPONSIVE — 1300PX
   ========================= */

@media (max-width: 1300px) {

  .aw-branded-notch-stage {
    width: 100%;
    max-width: 100%;
  }

  .aw-branded-notch--top .aw-branded-notch-stage,
  .aw-branded-notch--bottom .aw-branded-notch-stage {
    top: 0;
  }

  .aw-branded-notch--top .aw-branded-notch-shape--right,
  .aw-branded-notch--bottom .aw-branded-notch-shape--right {
    right: -150px;
  }

  .aw-branded-notch--top .aw-branded-notch-shape--left,
  .aw-branded-notch--bottom .aw-branded-notch-shape--left {
    left: -150px;
  }
}


/* =========================
   RESPONSIVE — 1024PX
   ========================= */

@media (max-width: 1024px) {

  .aw-branded-notch--top .aw-branded-notch-shape--right,
  .aw-branded-notch--bottom .aw-branded-notch-shape--right {
    right: -250px;
  }

  .aw-branded-notch--top .aw-branded-notch-shape--left,
  .aw-branded-notch--bottom .aw-branded-notch-shape--left {
    left: -250px;
  }
}


/* =========================
   RESPONSIVE — MOBILE
   ========================= */

@media (max-width: 767px) {

  .aw-branded-notch {
    --sep-h: 44px;
  }

  /* TOP */

  .aw-branded-notch--top .aw-branded-notch-shape--left {
    left: -180px;
    transform: translate(-1px, 0);
  }

  .aw-branded-notch--top .aw-branded-notch-shape--right {
    right: -180px;
    transform: translate(0, 0);
  }

  /* BOTTOM */

  .aw-branded-notch--bottom .aw-branded-notch-shape--left {
    left: -180px;
    transform: translate(-1px, 0) rotateX(180deg);
  }

  .aw-branded-notch--bottom .aw-branded-notch-shape--right {
    right: -180px;
    transform: translate(0, 0) rotateX(180deg);
  }
}