/* 
Theme Name: NerdStuds
Theme URI: https://github.com/elementor/hello-theme/
Description: This is a custom child theme built using the Elementor Hello theme.
Author: Jeremy Cox
Author URI: https://nerdstuds.com/
Template: hello-elementor
*/

:root {
  --black: #0b0b0d;
  --purple: #8a2be2;
  --white-op: #ffffff0d;
  --purple-op: #8a2be21a;
  --black-op: #0b0b0d03;
  --text: #ffffff;
  --box-shadow: 0px 0px 20px 0px var(--purple, #8a2be2);
  --box-shadow-hover: 0px 0px 40px 0px var(--purple, #8a2be2);
  --header-font: "area-variable", Sans-serif;
  --body-font: space-grotesk-variable;
}

/* General Styles */

*:focus:not(:focus-visible),
body input:focus,
body button:focus,
body a:focus,
body i:focus,
body *:focus,
body input:focus-visible,
body button:focus-visible,
body a:focus-visible,
body i:focus-visible,
body *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.swiper-slide-image,
.e-image-base {
  display: block;
}

.swiper-slide-image img,
.e-image-base img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.bg-video {
  inset: 0;
  overflow: hidden;
  position: absolute;
  transition: none;
}

.bg-video .e-background-video__media {
  height: 140%;
  top: -40%;
  will-change: transform;
}

.bg-video iframe {
  opacity: 0;
}

.bg-video iframe.is-covered {
  animation: hero-video-in 0.6s ease forwards;
}

.elementor-editor-active .bg-video iframe,
.elementor-editor-preview .bg-video iframe {
  opacity: 1;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .bg-video iframe.is-covered {
    opacity: 1;
    animation: none;
  }
}

@keyframes hero-video-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gallery-grid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.type-p-fix div p:last-of-type {
  margin-bottom: 0;
}

.card__btn {
  transition: 0.3s ease;
}

.service-card__icon svg path {
  stroke: var(--purple);
}

.service-card:not(:hover) {
  .card__btn {
    opacity: 0 !important;
  }
}

.service-card {
  .card__btn {
    transition: 0.3s ease;
    margin-bottom: -70px;
    opacity: 0;
    transition: 0.3s ease;
  }

  &:hover .card__btn {
    margin-bottom: 0;
    opacity: 1;
  }
}

.studio-configuration-slider {
  img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .elementor-swiper-button-prev {
    left: -30px !important;
  }

  .elementor-swiper-button-next {
    right: -30px !important;
  }
}

.card__icon svg path {
  stroke: var(--black);
}

.card:not(:hover) {
  .card__btn {
    opacity: 0 !important;
  }

  .card__icon svg path {
    stroke: var(--purple) !important;
  }
}

/* .card-grid {
  border: 1px solid var(--white-op) !important;
} */

/* .bg-glass {
  background: var(--white-op);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--white-op);
} */

.gallery img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.e-gallery-image {
  background-size: contain;
  background-repeat: no-repeat;
}

/* .img-glass {
  padding: 16px;
  background: var(--white-op);
  border-radius: 32px;
  border: 1px solid var(--white-op);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.img-glass img {
  border-radius: 16px;
} */

.video-card {
  /* fade top and bottom edges to true transparency */
  --pb-fade: 120px;
  -webkit-mask: linear-gradient(
    to bottom,
    transparent 0,
    black var(--pb-fade),
    black calc(100% - var(--pb-fade)),
    transparent 100%
  );
  mask: linear-gradient(
    to bottom,
    transparent 0,
    black var(--pb-fade),
    black calc(100% - var(--pb-fade)),
    transparent 100%
  );
}

.video-card__video iframe {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.video-card__video iframe.is-vimeo-ready {
  opacity: 1;
}

.elementor-icon-list-items.elementor-inline-items {
  row-gap: 15px;
}

.e-off-canvas__content {
  backdrop-filter: blur(20px);
}

.sanctum-table * {
  border: none !important;
  background: transparent !important;
  font-size: 22px;

  @media (max-width: 1300px) {
    font-size: 20px;
  }

  @media (max-width: 690px) {
    font-size: 18px;
  }
}

.sanctum-table table td {
  padding-left: 0;
  padding-bottom: 0;
}

.progressive-blur-wrapper {
  width: 100%;
  height: 100%;
}

.progressive-blur {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.progressive-blur > div {
  position: absolute;
  inset: 0;
}

/* blur increases bottom -> top, each layer switches on higher */
.progressive-blur > div:nth-child(1) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask: linear-gradient(to top, transparent 0%, black 25%);
  mask: linear-gradient(to top, transparent 0%, black 25%);
}
.progressive-blur > div:nth-child(2) {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask: linear-gradient(to top, transparent 25%, black 50%);
  mask: linear-gradient(to top, transparent 25%, black 50%);
}
.progressive-blur > div:nth-child(3) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask: linear-gradient(to top, transparent 50%, black 75%);
  mask: linear-gradient(to top, transparent 50%, black 75%);
}
.progressive-blur > div:nth-child(4) {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask: linear-gradient(to top, transparent 75%, black 100%);
  mask: linear-gradient(to top, transparent 75%, black 100%);
}

/* Popup Maker Styles */

.pum-container {
  max-width: 750px !important;
  width: 100% !important;
}

.popmake {
  overflow: hidden;
  top: 0 !important;
}

.popmake h2 {
  color: var(--text);
  font-size: 40px;
  padding-bottom: 20px;
}

.pum-content {
  background: var(--white-op);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 100%;
  border-radius: 0 !important;
  padding: 80px 40px 40px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.popmake p {
  color: var(--text);
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.popmake-close {
  top: 35px !important;
  right: 35px !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  font-family: var(--body-font) !important;
  filter: brightness(0) invert(1) !important;
  background-image: url("/wp-content/uploads/2022/08/icon-close.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  width: 30px !important;
  height: 30px !important;
}

.pum-overlay {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 690px) {
  .popmake {
    width: 85vw !important;
  }

  .pum-content {
    padding: 30px !important;
  }

  .popmake h2 {
    font-size: 30px !important;
  }

  .popmake-close {
    width: 44px !important;
    height: 44px !important;
    top: 12px !important;
    right: 12px !important;
    background-size: 18px 18px !important;
  }
}

@media (max-width: 480px) {
  .popmake h2 {
    font-size: 24px !important;
  }

  .popmake p {
    font-size: 17px !important;
  }
}

/* Gravity Form Styles */

.gfield_validation_message,
.grecaptcha-badge,
.gform_heading {
  display: none !important;
}

.gform_fields {
  row-gap: 30px !important;
}

.datepicker {
  width: 100% !important;
}

.gfield_required {
  padding-left: 3px !important;
}

.gform-field-label {
  color: var(--text) !important;
  text-transform: uppercase;
  font-size: 14px !important;
  letter-spacing: 2.4px !important;
  font-weight: 400 !important;
  display: inline-block !important;

  @media (max-width: 1000px) {
    font-size: 13px !important;
  }

  @media (max-width: 690px) {
    font-size: 12px !important;
  }
}

.gform-body input:not([type="submit"]),
.gform-body textarea,
.gform-body select {
  border: 1px solid var(--purple) !important;
  border-radius: 0px !important;
  background-color: transparent;
  color: var(--text) !important;
  padding: 10px 15px !important;
  font-size: 16px !important;
  line-height: 1.4em !important;
  min-height: 44px !important;
}

.gform-body input::placeholder,
.gform-body textarea::placeholder,
.gform-body select::placeholder {
  color: var(--text) !important;
  opacity: 1 !important;
  font-size: 16px !important;
}

.gform-datepicker-toggle {
  --gf-field-date-icon-color: var(--text);
  --gf-field-date-icon-color-active: var(--text);
  color: var(--text) !important;

  .gform-calendar-icon {
    color: var(--text) !important;

    &::before {
      color: var(--text) !important;
    }
  }
}

.gfield_time_hour,
.gfield_time_minute {
  input[type="number"] {
    --gf-icon-ctrl-number: none;
    --gf-ctrl-number-spin-btn-appearance: auto;
    color-scheme: dark;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      opacity: 1;
    }
  }
}

.gform-datepicker-calendar {
  --gf-ctrl-date-picker-cell-content-color: var(--text);
  --gf-ctrl-date-picker-cell-content-bg-color-hover: var(--purple-op);
  --gf-ctrl-date-picker-cell-content-color-hover: var(--text);
  --gf-ctrl-date-picker-cell-content-bg-color-selected: var(--purple);
  --gf-ctrl-date-picker-cell-content-color-selected: var(--text);
  box-sizing: border-box !important;
  width: 332px !important;
  max-width: calc(100vw - 40px) !important;
  padding: 16px !important;
  border: 1px solid var(--purple) !important;
  border-radius: 0 !important;
  background: var(--black) !important;
  box-shadow: var(--box-shadow) !important;
  color: var(--text) !important;
  font-family: var(--body-font) !important;

  .calendar {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text) !important;

    td,
    th,
    .nav,
    .day,
    .week {
      border: 0 !important;
      color: var(--text) !important;
    }

    .week {
      background: var(--purple-op) !important;
    }

    select {
      min-height: 44px !important;
      padding: 10px 34px 10px 15px !important;
      border: 1px solid var(--purple) !important;
      border-radius: 8px !important;
      background-color: var(--black) !important;
      color: var(--text) !important;
      color-scheme: dark;
      font-family: var(--body-font) !important;
      font-size: 16px !important;

      option {
        background: var(--black);
        color: var(--text);
      }
    }

    .nav.btn {
      border-radius: 0 !important;
      cursor: pointer;

      span {
        color: var(--text) !important;
      }

      &:hover {
        background: var(--purple-op) !important;
        color: var(--text) !important;
      }
    }

    .day {
      background: transparent !important;
      border-radius: 0 !important;
      cursor: pointer;

      span {
        color: var(--text) !important;
      }

      &:not(.selected):not(.dayMarked):not(.disabled) span:hover,
      &[aria-current="date"]:not(.selected):not(.dayMarked) span {
        background: var(--purple-op) !important;
        color: var(--text) !important;
      }

      &.dayMarked span,
      &.selected span,
      &[aria-selected="true"] span {
        background: var(--purple) !important;
        color: var(--text) !important;
      }
    }

    .disabled {
      color: var(--text) !important;
      opacity: 0.35;
    }

    .nav.btn,
    .day,
    select {
      &:focus-visible {
        outline: 2px solid var(--text) !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 2px var(--purple) !important;
      }
    }
  }
}

.gform-theme--framework .gform-loader {
  border-block-end-color: var(--purple) !important;
  border-block-start-color: rgba(255, 255, 255, 0.3) !important;
  border-inline-end-color: rgba(255, 255, 255, 0.3) !important;
  border-inline-start-color: var(--purple) !important;
}

.gform-footer button,
.gform-footer input,
.gfield--type-submit input {
  line-height: 1em !important;
  background: var(--purple) !important;
  color: white !important;
  border: 1px solid var(--purple) !important;
  box-shadow: var(--box-shadow) !important;
  font-family: var(--body-font);
  margin-bottom: 0 !important;
  font-weight: 400 !important;
  letter-spacing: 2.4px !important;
  padding: 12px 30px !important;
  border-radius: 40px !important;
  text-transform: uppercase !important;

  &:hover {
    box-shadow: var(--box-shadow-hover) !important;
  }
}

.gform_footer {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 30px !important;
}

.gform_footer button:focus,
.gform_footer input[type="submit"]:focus {
  outline: transparent auto 0px !important;
  background: var(--purple) !important;
  color: var(--text) !important;
}

.gform_confirmation_message {
  text-align: center;
  font-size: 18px;
  line-height: 1.4em;
  font-weight: bold !important;
  color: white !important;
}

.gform-body input:-webkit-autofill,
.gform-body input:-webkit-autofill:hover,
.gform-body input:-webkit-autofill:focus,
.gform-body input:-webkit-autofill:active,
.gform-body select:-webkit-autofill,
.gform-body select:-webkit-autofill:hover,
.gform-body select:-webkit-autofill:focus,
.gform-body select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #2b2137 inset !important;
}

input:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
}

/* Error Message Styles */

.gform_validation_errors {
  display: none !important;
}

.gform_wrapper.gravity-theme .gfield_error label,
.gform_wrapper.gravity-theme .gfield_error legend,
.gfield_required_asterisk {
  color: salmon !important;
}

.gform_body input[aria-invalid="true"],
.gform_body select[aria-invalid="true"],
.gform_body textarea[aria-invalid="true"] {
  border: 1px solid salmon !important;
}