/* ============================================================
   MODULE: SHORT-CODE-SECTION (v3.0.4 — Force embed shadow on desktop)
   Path: /modules/short-code-section/short-code-section.css
   ------------------------------------------------------------
   - Guarantees embed (form card) shadow on desktop.
   - Keeps shadows disabled on mobile (≤768px).
   - Prevents ancestor overflow from clipping the shadow.
   ============================================================ */

.atx-short-code-section {
  position: relative;
  width: 100%;
  z-index: var(--scs-z, 10);
  isolation: isolate;
  overflow: visible !important;

  /* Compensation for negative embed offset */
  padding-bottom: calc(0px - var(--scs-embed-offset-y, 0));
}

.atx-short-code-section__inner {
  position: relative;
  width: 100%;
  display: block;
  overflow: visible !important;
}

/* Background box (flat, full-width color) */
.atx-short-code-section__bg {
  position: relative;
  width: var(--scs-bg-width, 100%);
  height: var(--scs-bg-height, auto);
  background-color: var(--scs-bg-color, rgba(255,255,255,1));
  padding: var(--scs-bg-pad-top, 3rem) var(--scs-bg-pad-x, 1.5rem)
           var(--scs-bg-pad-bottom, 3rem);
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--scs-bg-radius, 0);
  overflow: visible !important;
  transform: translateY(var(--scs-bg-offset-y, 0));
  transition: all 0.3s ease-in-out;
}

/* Zero-height state */
.atx-short-code-section__bg.is-zero {
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Caption */
.atx-short-code-section__caption {
  margin: 0 auto;
  text-align: var(--scs-caption-align, center);
  color: var(--scs-caption-color, #000);
  font-size: var(--scs-caption-size, clamp(1.4rem, 2vw, 2rem));
  line-height: 1.2;
  padding-top: var(--scs-caption-pad-top, 0);
  padding-bottom: var(--scs-caption-pad-bottom, 0);
  font-weight: 700;
}
.atx-short-code-section__caption.is-uppercase { text-transform: uppercase; }

/* Embed box wrapper */
.atx-short-code-section__embedwrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: var(--scs-embed-z, 20);
  transform: none !important;
  margin-top: var(--scs-embed-offset-y, 0);
  margin-bottom: 0;
  overflow: visible !important;
}

/* Embed (the card that should cast a shadow) */
.atx-short-code-section__embed {
  position: relative;      /* create a stacking context for the shadow */
  z-index: 5;              /* ensure above bg plane */
  width: var(--scs-embed-width, 100%);
  max-width: var(--scs-embed-max-width, 1000px);
  background: var(--scs-embed-bg, #fff);

  /* Composite border (prevents faint outlines) */
  border: var(--scs-embed-border-width, 0)
          var(--scs-embed-border, none)
          var(--scs-embed-border-color, transparent);

  border-radius: var(--scs-embed-radius, 16px);
  box-shadow: var(--scs-embed-shadow, 0 12px 40px rgba(0,0,0,0.25));
  padding: var(--scs-embed-padding, 0rem);
  min-height: var(--scs-embed-height, auto);
}

/* Force shadow on desktop in case other CSS sets it to none */
@media (min-width: 769px) {
  .atx-short-code-section .atx-short-code-section__embed {
    box-shadow: var(--scs-embed-shadow, 0 20px 48px -6px rgba(0,0,0,0.25)) !important;
  }
}

/* Embed pull-up into the hero (desktop ≥769px).
   The per-height tier value (-10/-20/-30rem) is the MAXIMUM pull. It is
   capped by --scs-pull-fit so the card never covers the hero text/call
   button: hero = 80vh, text starts at 25% → text ends ~18rem below that.
   The inline script in short-code-section.php then measures the real
   call-button position and sets the exact pull (CSS is the first-paint
   approximation). Short windows (mobile landscape) → pull 0. */
.atx-short-code-section {
  --scs-pull-fit: min(0px, calc(18rem - 60vh));
}

/* Responsive embed offset by viewport HEIGHT: short window (<800px height) */
@media (min-width: 769px) and (max-height: 799px) {
  .atx-short-code-section {
    --scs-pull: max(var(--scs-embed-offset-y-lowres, var(--scs-embed-offset-y, 0)), var(--scs-pull-fit));
    padding-bottom: calc(0px - var(--scs-pull));
  }
  .atx-short-code-section__embedwrap {
    margin-top: var(--scs-pull);
  }
}

/* Responsive embed offset by viewport HEIGHT: medium window (800-999px height) */
@media (min-width: 769px) and (min-height: 800px) and (max-height: 999px) {
  .atx-short-code-section {
    --scs-pull: max(var(--scs-embed-offset-y-medres, var(--scs-embed-offset-y, 0)), var(--scs-pull-fit));
    padding-bottom: calc(0px - var(--scs-pull));
  }
  .atx-short-code-section__embedwrap {
    margin-top: var(--scs-pull);
  }
}

/* Responsive embed offset by viewport HEIGHT: tall window (≥1000px height) */
@media (min-width: 769px) and (min-height: 1000px) {
  .atx-short-code-section {
    --scs-pull: max(var(--scs-embed-offset-y-highres, var(--scs-embed-offset-y, 0)), var(--scs-pull-fit));
    padding-bottom: calc(0px - var(--scs-pull));
  }
  .atx-short-code-section__embedwrap {
    margin-top: var(--scs-pull);
  }
}

/* ============================================================
   Scoped reset for VikRentCar outer containers (NO inputs)
   ============================================================ */
.atx-short-code-section__content .vrcdivsearch,
.atx-short-code-section__content .vrcdivsearch-inner,
.atx-short-code-section__content .vrc-searchf-section-locations,
.atx-short-code-section__content .vrc-searchf-section-datetimes,
.atx-short-code-section__content .vrc-searchf-section-sbmt,
.atx-short-code-section__content .vrcsfentrycont,
.atx-short-code-section__content .vrcsfentryselect,
.atx-short-code-section__content .vrcsfentrysubmit,
.atx-short-code-section__content .vrclocationsbox,
.atx-short-code-section__content .vrclocationsmapdiv,
.atx-short-code-section__content .vikrentcar,
.atx-short-code-section__content .wrap {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box;
}

.atx-short-code-section__content .vrcdivsearch::before,
.atx-short-code-section__content .vrcdivsearch::after,
.atx-short-code-section__content .vrcdivsearch-inner::before,
.atx-short-code-section__content .vrcdivsearch-inner::after {
  content: none !important;
}

/* ============================================================
   MOBILE (shadow intentionally disabled when flagged)
   ============================================================ */
@media (max-width: 768px) {
  .atx-short-code-section {
    padding-bottom: calc(0px - var(--scs-mobile-embed-offset-y, 0));
  }

  .atx-short-code-section.is-mobile-neutralize .atx-short-code-section__bg {
    height: var(--scs-mobile-bg-height, auto);
  }

  .atx-short-code-section.is-mobile-neutralize .atx-short-code-section__embedwrap {
    transform: none !important;
    margin-top: var(--scs-mobile-embed-offset-y, 0);
    margin-bottom: 0;
  }

  .atx-short-code-section.is-mobile-neutralize .atx-short-code-section__embed {
    padding: var(--scs-mobile-embed-padding, 1rem);
    border-radius: var(--scs-mobile-embed-radius, 12px);
    max-width: var(--scs-mobile-embed-max-width, 100%);
  }

  /* When mobile_disable_shadows === true, this class is present */
  .atx-short-code-section.is-mobile-no-shadow .atx-short-code-section__bg,
  .atx-short-code-section.is-mobile-no-shadow .atx-short-code-section__embed {
    box-shadow: none !important;
  }
}



/* ============================================================
   TEMP: Control bottom padding of Short-Code-Section wrapper
   Different values for desktop / tablet / mobile
   ============================================================ */

/* TEMP: Nuke ALL borders and shadows on the short-code-section wrapper */
.atx-short-code-section {
    border: none !important;
}

/* MOBILE (≤ 767px) */
@media (max-width: 767px) {
    .atx-short-code-section {
        padding-bottom: 1rem !important;   /* mobile value */
    }
}

/* TABLET (768px–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .atx-short-code-section {
        padding-bottom: 1rem !important;   /* tablet value */
    }
}

/* DESKTOP (≥ 1024px) */
@media (min-width: 1024px) {
    .atx-short-code-section {
        padding-bottom: 5rem !important;   /* desktop value */
    }
}


/**********************************************/

/* Embed heading inside the form card */
.atx-short-code-section__caption--embed {
  margin-top: 0;
  margin-bottom: 0rem;  /* default desktop/tablet */
  padding-top: 0;
  padding-bottom: 0;
  letter-spacing: 0.1em;
}

/* MOBILE (≤ 767px) */
@media (max-width: 767px) {
  .atx-short-code-section__caption--embed {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* TABLET (768px–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .atx-short-code-section__caption--embed {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* DESKTOP (≥ 1024px) */
@media (min-width: 1024px) {
  .atx-short-code-section__caption--embed {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}